angular2.HostBinding and HostListener example

angular2.host-binding-listener.ts

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

@Directive({
    selector: '[highlight]', //element having hightlight [attribute] is selected or .class or #id or component
})
export class HighlightDirective {
    @HostListener('mouseenter') mouseover(){
        this.backgroundColor = 'green';
        //can use renderer here to change style here
    }

     @HostListener('mouseleave') mouseleave(){
        this.backgroundColor = 'white';
    }
    @HostBinding('style.backgroundColor') get setColor(){
        return this.backgroundColor;
    } //read only ..
    private backgroundColor = 'white';
    constructor() {
    }
}