70. Host Bindings et Host Listeners

Bien que liés aux directives, HostBinding et HostListener peuvent être utilisés directement dans une classe de Composant pour gérer les propriétés et événements sur l' élément hôte du composant (<app-mon-composant>).

1. @HostBinding (Modifier les propriétés de l'hôte)

Utilisé pour ajouter par programmation des classes, attributs ou styles à la balise personnalisée du composant lui-même.

Exemple : Définir un attribut sur l'élément hôte pour la sélection CSS.

typescript @Component({ selector: 'app-selectable-item', template: '...' }) export class SelectableItemComponent { isActive: boolean = false;

// Lier la classe 'active' de l'élément hôte @HostBinding('class.active') get activeClass() { return this.isActive; }

// Lier une valeur d'attribut @HostBinding('attr.role') role = 'button';

toggleActive() { this.isActive = !this.isActive; } }

Si isActive est true, l'élément hôte devient <app-selectable-item class="active">.

2. @HostListener (Écouter les événements de l'hôte)

Utilisé pour écouter les événements survenant sur l'élément hôte, utile pour les interactions comme le drag-and-drop ou les raccourcis clavier globaux.

Exemple : Écouter un événement keydown global.

typescript @Component({ /* ... */ }) export class ShortcutComponent {

// Écouter l'événement 'keydown' n'importe où sur la fenêtre @HostListener('window:keydown', ['$event']) handleKeydown(event: KeyboardEvent) { if (event.key === 'Escape') { console.log('Touche Échap pressée globalement !'); // Fermer une modale, par exemple } } }

Les Host Listeners sont extrêmement utiles pour créer une logique d'interface réutilisable liée à la souris, au clavier ou à la gestion du focus.