In Angular 2, we are used to listening for events on the Component’s DOM elements, however how do we listen to events outside of this range?
Two ways to do this:
- Creating a Host Listener
- Using the Component’s host property
The Host Listener Way
Angular 2 provides a HostListener Decorator in order to match an event triggered on a target with a function declared on the next line.
Just like this:
The syntax is as follow: ‘target:event’, [args].
When clicking on the document, we will be able to use the event triggered, you can also pass other arguments like $event.target for example.
However the target must be