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

@Directive({
    selector: '[appMyFirstDirective]'
})
export class MyFirstDirectiveDirective {

    @Input() appMyFirstDirective:string;

    constructor(private element: ElementRef){}

    @HostListener('mouseenter')
    public onMouseEnter(){
        this.element.nativeElement.style.backgroundColor = this.appMyFirstDirective;
    }

    @HostListener('mouseleave')
    public onMouseLeave(){
        this.element.nativeElement.style.backgroundColor = '';
    }
}