JAVASCRIPT

angular HostListener

//import {ElementRef, HostListener } from '@angular/core';

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('yellow');
}

@HostListener('mouseleave') onMouseLeave() {
  this.highlight('');
}

private highlight(color: string) {
  this.el.nativeElement.style.backgroundColor = color;
}

angular hostlistener

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

import hostlistener angular

import { HostListener } from '@angular/core'