These decorators let a directive or component manipulate and respond to its host element — the element the directive sits on (or the component's own root element). @HostBinding sets properties/attributes on the host; @HostListener listens for events on it.
{ , } ;
({ : })
{
() isActive = ;
() color = ;
() role = ;
}
@HostBinding reactively binds a class/style/attribute/property on the host element to a component field — change the field and the host updates.
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 subscribes to a DOM event on the host (and can receive $event and other args). Together they let a directive be fully self-contained: it listens for events on its host and reactively updates the host's appearance.
<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 and @HostListener are the standard tools for directives to interact with their host element — adding classes/styles/attributes and reacting to events declaratively, without manually grabbing ElementRef.nativeElement and wiring listeners.
They're essential for building reusable behavior directives (highlight, tooltip, draggable, accessible widgets) cleanly, and they automatically handle change detection and listener cleanup that manual DOM code would have to manage.