HostListener
Decorator that declares a DOM event to listen for, and provides a handler method to run when that event occurs.
| Option | Description |
|---|---|
eventName
|
The CSS event to listen for. |
args
|
A set of arguments to pass to the handler method when the event occurs. |
Usage notes
The following example declares a directive that attaches a click listener to a button and counts clicks.
- @Directive({selector: 'button[counting]'})
- class CountClicks {
- numberOfClicks = 0;
-
- @HostListener('click', ['$event.target'])
- onClick(btn) {
- console.log('button', btn, 'number of clicks:', this.numberOfClicks++);
- }
- }
-
- @Component({
- selector: 'app',
- template: '<button counting>Increment</button>',
- })
- class App {}