Ti decoratori omogućuju direktivi ili komponenti da manipulira i odgovori na svoj host element — element na kojem se nalazi direktiva (ili vlastiti root element komponente). @HostBinding postavlja svojstva/atribute na host; @HostListener sluša događaje na njemu.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding reaktivno veže svojstvo/stil/atribut/svojstvo na host element sa poljem komponente — promijenite polje i host se ažurira.
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 pretplaćuje na DOM događaj na host-u (i može primiti $event i druge argumente). Zajedno, oni omogućavaju direktivi da bude u potpunosti samostalna: sluša događaje na svom host-u i reaktivno ažurira izgled host-a.
<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 i @HostListener su standardni alati za direktivе da međusobno djeluju sa svojim host element-om — dodavanje klasa/stilova/atributa i reaktivno odgovaranje na događaje deklarativno, bez ručnog grabanja ElementRef.nativeElement i povezivanja slušalaca.
Oni su bitni za čisto sagradnje ponovno upotrebljivih bihevior direktiva (istaknute, tooltip, draggable, dostupne widgete), i oni automatski obrađuju detekciju promjena i čišćenje slušalaca koji bi ručni DOM kod morao upravljati.