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


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

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


Related videos on Youtube

Author by


Updated on June 04, 2022


  • Alexander
    Alexander 4 months


    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


    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.

    1. 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.