Angular host listener property in component decorator with logic

I have a SidebarComponent:

import { Component } from '@angular/core';
import { MenuComponent } from '../shared/menu/menu.component';

@Component({
selector: 'app-sidebar',
standalone: true,
imports: [MenuComponent],
templateUrl: './sidebar.component.html',
styleUrl: './sidebar.component.css',
host: {
'(document:keydown.n)': 'toggleMenu($event)',
},
})
export class SidebarComponent {
isMenuOpen = false;

toggleMenu(event: Event) {
this.isMenuOpen = !this.isMenuOpen;
event.stopPropagation();
}

onOutsideClick() {
this.isMenuOpen = false;
}
}


I am listening for a "n" keypress to toggle the menu:

host: {
'(document:keydown.n)': 'toggleMenu($event)',
},


In the new Angular documentation, it is recommended to use the host property on the @Component decorator instead of the @HostListener() decorator.

That said, how to add complex logic inside of the string in the host property object? For example, I am listening for the key "n" to toggle the menu. However, it is triggering when typing the letter "n" in an unrelated input field. How to stop this behavior?

Also, there is no syntax highlighting in the host property obviously because it is a string in an object. Not sure if this is intentional, but it makes for a bad developer experience when referring to fields and methods in the component class. But this is a side issue.

Continue reading...