Angular - Criando uma diretiva: HostListener e HostBinding.

• HostListener fica escultadno o evento no elemento hospedeiro "p".
• HostBinding faz uma assosiação/binding de um determinado atributo ou classe de um elemento para uma variável.

<p highlightMouse>
    Texto com highlight quando passo o mouse.
</p>

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

@Directive({
    selector: '[highlightMouse]'
})
export class HighlightMouseDirective {

    @HostListener('mouseenter') onMouseOver() {
        this.backgroundColor = 'yellow';
    }

    @HostListener('mouseleave') onMouseLeave() {
        this.backgroundColor = 'white';
    }

    //Host Binding
    @HostBinding('style.backgroundColor') backgroundColor: string;
    
    constructor(){} 

}