import { Directive, HostListener, HostBinding} from '@angular/core';
@Directive({
selector: '[dirHighlight]'
})
export class HighlightDirective {
// @HostListener bind a listener to the element hosting this directive which trigger a method declared after this it, it this case foco()
@HostListener('focus') foco(){
this.backgroundColor = 'green';
};
@HostListener('blur') onmouseleave(){
this.backgroundColor = 'black';
};
// @HostBinding bind a javascript property to the elemen hosting this directive, the value of it it will be change by the value that return the getter after it
@HostBinding('style.color') get setColor(){
return this.backgroundColor;
}
private backgroundColor = 'black';
}