How to properly attach an Event Listener to global 'window' in Angular 6+?

Question

Background

Our Angular 6 application contains an iframe with some 3rd party data. To enable a safe cross-domain communication the child iframe posts messages to parent Angular application using window.postMessage() API. In order to receive those messages parent window must attach an event listener like window.addEventListener("message", callback) to listen for MessageEvents

Question

I need to listen for message events inside Angular component and it's not obvious for me how to properly access global window in Angular way. The only solution I imagine at the moment is:

1. Create an Angular Service called MessageListenerService with the following method:

function listenForMessageEvent(callback) { this.renderer.listen('window', 'message', callback); }

Note: this.renderer here is Renderer2 from Angular core.

2. Just use MessageListenerService.listenForMessageEvent() in my custom component.

I feel like it's not the standard approach in Angular world. Could someone advise any best practise here?

Thanks a lot.

Solution

The "Angular" way of doing this is to use HostListener

https://angular.io/api/core/HostListener

Here is a stackblitz example for your review. Open console and review the log when using keys on the keyboard to trigger events.

https://stackblitz.com/edit/hostlistener-1