@HostListener docs do not mention option to listen to global events

I’m stil relatively new to Angular, so it’s probable that someone with more knowledge could guess this. But it seems to me that this options should be mentioned; it’s anything but self-evident that a decorator that connects to DOM events targeted at the host element can also subscribe to window events, let alone how that is done.

For example, I had found @HostListener somewhere on the internet, and used it as I had found it, which was with “window:” prepended to the event name. This appeared to work for me, until I noticed that my keyboard handler would react even when my component wasn’t focused. It took me a while to figure out that the prepended “window:” was actual non-standard usage.

@HostListener('window:keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent) {

    console.log('handleKeyDown:', event);
   //...

[MrJithil]

@JPGygax68, please check the below example is good enough to grab an idea about HostListner usage. If something more is required, please let me know.

[MrJithil]

@kapunahelewong PR created with an example which mentioning how we could handle a global event.

https://github.com/angular/angular/pull/34228