Ce fac @HostBinding și @HostListener?

Question

Accepted Answer

Acești decoratori permit unei directive sau componente să manipuleze și să răspundă la **elementul gazdă** — elementul pe care se află directiva (sau propriul element rădăcină al componentei). `@HostBinding` stabilește proprietăți/atribute pe gazdă; `@HostListener` ascultă evenimente pe acesta. ## @HostBinding — legare la proprietăți/atribute ale gazdei ```ts import { Directive, HostBinding } from "@angular/core"; @Directive({ selector: "[appHighlight]" }) export class HighlightDirective { @HostBinding("class.active") isActive = false; // toggle a CSS class on the host @HostBinding("style.color") color = "black"; // bind an inline style @HostBinding("attr.role") role = "button"; // set an attribute } ``` `@HostBinding` leagă reactiv o clasă/stil/atribut/proprietate pe elementul gazdă la un câmp de componentă — schimbați câmpul și gazda se actualizează. ## @HostListener — răspundeți la evenimente ale gazdei ```ts 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 abonează la un eveniment DOM pe gazdă (și poate primi `$event` și alți parametri). Împreună, ele permit unei directive să fie complet auto-suficientă: ascultă evenimente pe gazda sa și actualizează reactiv aspectul gazdei. ## Un exemplu complet: evidențiere la hover ```text

Hover me

→ mouseenter fires onEnter() → sets bg='yellow' → @HostBinding updates the

's background → mouseleave fires onLeave() → clears it ``` ## Alternativa metadatelor gazdei ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## De ce este important `@HostBinding` și `@HostListener` sunt instrumentele standard pentru ca **directivele** să interacționeze cu elementul gazdă — adăugând clase/stiluri/atribute și răspunzând reactiv la evenimente în mod declarativ, fără a captura manual `ElementRef.nativeElement` și a conecta ascultători. Sunt esențiale pentru construirea curat a directivelor de comportament reutilizabile (highlight, tooltip, draggable, widgeturi accesibile), și gestionează automat detectarea schimbărilor și curățarea ascultătorilor pe care codul DOM manual ar trebui să le gestioneze.