@HostListner in Angular | Directives | Angular 15+

The @HostListner decorator listens to the DOM event on the host element and it reacts to that event by executing an event handler method.

Goto app\custom_directives and open terminal run below command

1.

ng generate directive onhoverColorWhite

2.add cpde inside onhover-color-white.directive.spec.ts

import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({
  selector: '[appOnhoverColorWhite]'
})
export class OnhoverColorWhiteDirective{

  constructor(private element: ElementRef,private render: Renderer2) { }
  @HostListener('mouseenter')  mouseover(){
    this.render.setStyle(this.element.nativeElement,'color','white'); //set inline style  
  }
  @HostListener('mouseleave')  mouseout(){
    this.render.setStyle(this.element.nativeElement,'color','black'); //set inline style  
  }
}

3. in view

<div appOnhoverColorWhite>
  This is a out!
</div>