title: Attribute directive @Input alias in Angular 2
body: <p>I am learning attribute directives in Angular 2. When using <code>@Input</code> alias in attribute directives, It will not work, why?</p>
  
  <h2>component</h2>
  
  <pre><code>&lt;p appHighlight = "color"&gt;Hightlight Me&lt;/p&gt;
  </code></pre>
  
  <h2>directive</h2>
  
  <pre><code>export class HighlightDirective {
  
    @Input('appHighlight') highlightcolor: string;
  
    constructor(
      // ElementRef is a service that grants direct access to the DOM element through its nativeElement property.
      private el: ElementRef
    ) {
      // el.nativeElement.style.backgroundColor = 'yellow';
    }
  
  
    // @HostListener decorator lets you subscribe to events of the DOM element that hosts an attribute directive
    @HostListener('mouseenter') onMouseEnter() {
      this.highlight(this.highlightcolor || 'red');
    }
  
    @HostListener('mouseleave') onmouseleave() {
      this.highlight(null);
    };
  
    private highlight(color: string) {
      this.el.nativeElement.style.backgroundColor = color;
    }
  
  }
  </code></pre>