LuanDantas
3/2/2018 - 11:52 AM

Criando uma diretiva: HostListener e HostBinding.

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(){} 

}