HostListener
decorator
Decorator that declares a DOM event to listen for, and provides a handler method to run when that event occurs.
Option | Description |
---|---|
eventName
|
The DOM event to listen for. |
args
|
A set of arguments to pass to the handler method when the event occurs. |
Options
eventName |
---|
The DOM event to listen for. |
eventName: string |
args |
---|
A set of arguments to pass to the handler method when the event occurs. |
args: string[] |
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 {}
The following example registers another DOM event handler that listens for key-press events.
import { HostListener, Component } from "@angular/core";
@Component({
selector: 'app',
template: `<h1>Hello, you have pressed keys {{counter}} number of times!</h1> Press any key to
increment the counter.
<button (click)="resetCounter()">Reset Counter</button>`
})
class AppComponent {
counter = 0;
@HostListener('window:keydown', ['$event'])
handleKeyDown(event: KeyboardEvent) {
this.counter++;
}
resetCounter() {
this.counter = 0;
}
}
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v9.angular.io/api/core/HostListener