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

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

  constructor(private element : ElementRef) {
    this.highlight(null);
   }

@HostListener('mouseenter') public onMouseEnterCustom(){
  this.highlight("Gray");
} 
@HostListener('mouseleave') public onMouseExitCustom(){
  this.highlight(null);
} 

public highlight(color : string){
  this.element.nativeElement.style.backgroundColor = color;
} 

}