angular-cn/public/docs/_examples/attribute-directives/ts/app/highlight.directive.2.ts

/* tslint:disable:no-unused-variable */
// #docregion
import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';

@Directive({
  selector: '[myHighlight]'
})

export class HighlightDirective {
  // #docregion ctor
  constructor(private el: ElementRef, private renderer: Renderer) { }
  // #enddocregion ctor

  // #docregion mouse-methods, host
  @HostListener('mouseenter') onMouseEnter() {
    // #enddocregion host
    this.highlight('yellow');
    // #docregion host
  }

  @HostListener('mouseleave') onMouseLeave() {
    // #enddocregion host
    this.highlight(null);
    // #docregion host
  }
  // #enddocregion host

  private highlight(color: string) {
    this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color);
  }
  // #enddocregion mouse-methods

}
// #enddocregion