Juri Strumpflohner
RSS
all articles

Angular: How do I register an event listener on document?

Author profile pic
Juri Strumpflohner
Published

I recently got asked by an Angular community member on Twitter how one can register an event on the document object. While it is totally possible to directly access the document object and hook up some listener, it is not suggested. There are better ways in Angular, see yourself.

$1

So, naively you could start and write something like this:

@Component({..})
export class MyComponent {
  constructor() {
     document.addEventListener('keyup', function() {
        console.log('keys pressed');
     });
  }
}

This definitely works. However it is considered bad practice to access elements outside the component directly such as in this case the global document object.

So there are two possibilities.

Using the component’s host property

You can use the component’s host property as follows:

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

@Component({
  ...
  host: {
    '(document:keyup)': 'onKeyUp($event)'
  }
})
export class MyComponent {
  onKeyUp(ev:KeyboardEvent) {
    // do something meaningful with it
    console.log(`The user just pressed ${ev.key}!`);
  }
}

Using the @HostListener decorator

Alternatively - personally my preferred way of doing it - is to use the @HostListener decorator:

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

Try it yourself

Note, that both of these methods work for the window object as well 👍.

Here’s a Plunker to play around with: https://plnkr.co/edit/n20EtGiB9trW0M5EkIfH?p=preview

Hope this was helpful :smiley:!