Estos decoradores permiten que una directiva o componente manipule y responda a su elemento anfitrión — el elemento sobre el que se encuentra la directiva (o el elemento raíz propio del componente). @HostBinding establece propiedades/atributos en el anfitrión; @HostListener escucha eventos en él.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding vincula reactivamente una clase/estilo/atributo/propiedad en el elemento anfitrión a un campo de componente — cambia el campo y el anfitrión se actualiza.
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 suscribe a un evento DOM en el anfitrión (y puede recibir $event y otros argumentos). Juntos permiten que una directiva sea completamente autónoma: escucha eventos en su anfitrión y actualiza reactivamente la apariencia del anfitrión.
<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 y @HostListener son las herramientas estándar para que las directivas interactúen con su elemento anfitrión — agregar clases/estilos/atributos y responder a eventos declarativamente, sin tener que obtener manualmente ElementRef.nativeElement e incorporar escuchadores.
Son esenciales para crear directivas de comportamiento reutilizables (resalte, información sobre herramientas, arrastrables, widgets accesibles) limpiamente, y manejan automáticamente la detección de cambios y la limpieza de escuchadores que el código DOM manual tendría que administrar.