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. |
Angular invokes the supplied handler method when the host element emits the specified event, and updates the bound element with the result.
If the handler method returns false, applies preventDefault
on the bound element.
Further information available in the Usage Notes...
eventName |
---|
The DOM event to listen for. |
|
args |
---|
A set of arguments to pass to the handler method when the event occurs. |
|
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–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/core/HostListener