Que font @HostBinding et @HostListener ?

Question

Accepted Answer

Ces décorateurs permettent à une directive ou un composant de manipuler et réagir à son **élément host** — l'élément sur lequel la directive se trouve (ou l'élément racine du composant). `@HostBinding` définit des propriétés/attributs sur l'hôte ; `@HostListener` écoute les événements sur celui-ci. ## @HostBinding — se lier aux propriétés/attributs de l'hôte ```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` lie réactivement une classe/style/attribut/propriété sur l'élément host à un champ du composant — modifiez le champ et l'hôte se met à jour. ## @HostListener — réagir aux événements de l'hôte ```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` s'abonne à un événement DOM sur l'hôte (et peut recevoir `$event` et d'autres arguments). Ensemble, ils permettent à une directive d'être complètement autonome : elle écoute les événements sur son hôte et met à jour réactivement l'apparence de l'hôte. ## Un exemple complet : surbrillance au survol ```text

Hover me

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

's background → mouseleave fires onLeave() → clears it ``` ## L'alternative avec métadonnées d'hôte ```ts @Directive({ selector: "[appHighlight]", host: { // equivalent, declared in metadata "[class.active]": "isActive", "(click)": "onClick($event)", }, }) ``` ## Pourquoi c'est important `@HostBinding` et `@HostListener` sont les outils standard pour que les **directives** interagissent avec leur élément host — en ajoutant des classes/styles/attributs et en réagissant aux événements de manière déclarative, sans grabber manuellement `ElementRef.nativeElement` et câbler les listeners. Ils sont essentiels pour construire proprement des directives de comportement réutilisables (surbrillance, infobulle, draggable, widgets accessibles), et ils gèrent automatiquement la détection de changements et le nettoyage des listeners qu'un code DOM manuel devrait gérer.