Do Angular has a similar function like window.addEventListener?

Question

I have a javascript function like below.

window.addEventListener('message', function(event) {
                document.getElementById('mytoken').value = JSON.parse(event.data);

                var token = JSON.parse(event.data);      

                alert('Received message ' + token.message);
                var mytoken = document.getElementById('mytoken');
                mytoken.value = token.message;
                }, false);

I'd like to use this script in Angular 5, of course, I am trying to find the proper solution for Angular 5. Thanks

You can use this function in angular – ferhado Aug 19 '18 at 19:15 — ferhado, Aug 19 '18 at 19:15

score 6 · Answer 1 · answered Aug 19 '18 at 19:18

6

In Angular you can use HostListener in some component like:

@HostListener('window:message', ['$event'])
onMessage(event) {
  ...
}

For alternative options see:

How to listen for mousemove event on Document object in Angular

answered Aug 19 '18 at 19:18

yurzui

205,937
32
433
399

score 5 · Answer 2 · answered Aug 19 '18 at 20:03

Using the HostListener Decorator

Personally my preferred way of doing it

    import {HostListener, KeyboardEvent} from '@angular/core';

    @Component({...})
    export class MyComponent {

    @HostListener('document:keyup', ['$event'])
    onKeyUp(ev:KeyboardEvent) {
      // do something meaningful with it
      console.log(`The user just pressed ${ev.key}!`);
     }
    }

Do Angular has a similar function like window.addEventListener?

2 Answers2