Using HostListener to Listen to Host Events when Creating Directive in Angular

host-listener.directive.ts

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

@Directive({
  selector: '[appHostListener]'
})
export class HostListenerDirective implements OnInit {

  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
  }

  ngOnInit(): void {
  }

  @HostListener('mouseenter') mouseover(eventData: Event) {
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'green');
  }

  @HostListener('mouseleave') mouseleave(eventData: Event) {
    this.renderer.setStyle(this.elementRef.nativeElement, 'background-color', 'transparent');
  }

}

app.component.html

<p appHostListener>Hello World 3</p>

References
https://github.com/mhdr/AngularSamples/tree/master/015/my-app

Related