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

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

• javascript
• angular
• angular5

• You can use this function in angular – ferhado Commented Aug 19, 2018 at 19:15

2 Answers 2

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

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}!`);
     }
    }