highlight.directive.ts

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

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'color', 'red');
  }

  @HostListener('mouseenter', ['$event']) onMouseEnter(event: Event) {
    console.log('mouseenter');
    console.log(event);
  }

  @HostListener('mouseleave', ['$event']) onMouseLeave(event: Event) {
    console.log('mouseleave');
    console.log(event);
  }


}