Deze decorators stellen een directive of component in staat om zijn host element — het element waarop de directive zich bevindt (of het eigen root element van de component) — te manipuleren en erop te reageren. @HostBinding stelt eigenschappen/attributen op de host in; @HostListener luistert naar events op het element.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding bindt reactief een class/style/attribute/property op het host element aan een componentveld — wijzig het veld en de host wordt bijgewerkt.
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 abonneert zich op een DOM event op de host (en kan $event en andere argumenten ontvangen). Samen stellen zij een directive in staat om volledig zelfstandig te zijn: het luistert naar events op zijn host en werkt de weergave van de host reactief bij.
<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 en @HostListener zijn de standaardtools waarmee directives met hun host element kunnen interageren — classes/styles/attributen toevoegen en reactief op events reageren, zonder handmatig ElementRef.nativeElement te grijpen en listeners in te richten.
Zij zijn essentieel voor het schoon bouwen van herbruikbare behavior directives (highlight, tooltip, draggable, accessible widgets), en zij verwerken automatisch change detection en listener cleanup waarmee handmatige DOM code zou moeten omgaan.