Questi decoratori consentono a una direttiva o componente di manipolare e rispondere al suo elemento host — l'elemento su cui risiede la direttiva (o l'elemento radice del componente). @HostBinding imposta proprietà/attributi sull'host; @HostListener ascolta gli eventi su di esso.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding associa reattivamente una classe/stile/attributo/proprietà dell'elemento host a un campo del componente — cambia il campo e l'host si aggiorna.
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 si sottoscrive a un evento DOM sull'host (e può ricevere $event e altri argomenti). Insieme consentono a una direttiva di essere completamente autonoma: ascolta gli eventi sul suo host e aggiorna reattivamente l'aspetto dell'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 sono gli strumenti standard affinché le direttive interagiscano con il loro elemento host — aggiungendo classi/stili/attributi e reagendo agli eventi in modo dichiarativo, senza dover afferrare manualmente ElementRef.nativeElement e collegare listener.
Sono essenziali per costruire direttive di comportamento riutilizzabili (evidenziazione, tooltip, trascinabile, widget accessibili) in modo pulito, e gestiscono automaticamente il rilevamento dei cambiamenti e la pulizia dei listener che il codice DOM manuale dovrebbe gestire.