HostListener

From Get docs
< @angular/coreAngular/docs/8/api/core/hostlistener


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

The DOM event to listen for.

eventName: string

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 {}

© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v8.angular.io/api/core/HostListener