Esses decoradores permitem que uma diretiva ou componente manipule e responda ao seu elemento host — o elemento no qual a diretiva fica (ou o próprio elemento raiz do componente). @HostBinding define propriedades/atributos no host; @HostListener escuta eventos nele.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding vincula reativamente uma classe/estilo/atributo/propriedade no elemento host a um campo de componente — altere o campo e o host é atualizado.
import { Directive, HostListener, HostBinding } from "@angular/core";
@Directive({ selector: "[appHighlight]" })
export class HighlightDirective {
@HostBinding("style.background") bg = "";
@HostListener("mouseenter") onEnter() {
this.bg = "yellow"; // changing the field updates the host via HostBinding
}
@HostListener("mouseleave") onLeave() {
this.bg = "";
}
@HostListener("click", ["$event"]) onClick(event: MouseEvent) {
console.log("host clicked", event);
}
}
@HostListener se inscreve em um evento DOM no host (e pode receber $event e outros argumentos). Juntos, eles permitem que uma diretiva seja totalmente autossuficiente: ela escuta eventos em seu host e atualiza reativamente a aparência do host.
<p appHighlight>Hover me</p>
→ mouseenter fires onEnter() → sets bg='yellow' → @HostBinding updates the <p>'s background
→ mouseleave fires onLeave() → clears it
@Directive({
selector: "[appHighlight]",
host: { // equivalent, declared in metadata
"[class.active]": "isActive",
"(click)": "onClick($event)",
},
})
@HostBinding e @HostListener são as ferramentas padrão para diretivas interagirem com seu elemento host — adicionando classes/estilos/atributos e respondendo reativamente a eventos de forma declarativa, sem capturar manualmente ElementRef.nativeElement e conectar listeners.
São essenciais para construir de forma limpa diretivas de comportamento reutilizáveis (destaque, dica de ferramenta, arrastável, widgets acessíveis), e tratam automaticamente da detecção de mudanças e limpeza de listeners que o código DOM manual teria que gerenciar.