66. Interaction entre composants : Output et EventEmitter

Pour communiquer des données vers le haut de l'arbre (de l'Enfant vers le Parent), Angular utilise le décorateur @Output() associé à la classe EventEmitter.

1. Définir l'Output dans le composant Enfant

Une propriété @Output() doit être une instance de EventEmitter<T>, où T est le type de données à envoyer. L' EventEmitter fournit la méthode emit().

typescript // item-selector.component.ts (L'Enfant) import { Component, Output, EventEmitter } from '@angular/core';

@Component({ /* ... */ }) export class ItemSelectorComponent {

// Définir le nom de l'événement et le type de payload (string ici) @Output() itemSelected = new EventEmitter();

selectItem(itemName: string) { // 1. Déclencher l'événement this.itemSelected.emit(itemName); } }

2. Écouter l'événement dans le composant Parent

Le composant parent écoute à l'aide de la syntaxe de liaison d'événement (( )) et associe la valeur émise (fournie par Angular via $event) à une méthode du parent.

typescript // parent.component.ts export class ParentComponent { lastSelectedItem: string = 'Aucun';

// Méthode pour gérer le payload de l'événement handleSelection(name: string) { this.lastSelectedItem = name; console.log(L'enfant a sélectionné : ${name}); } }

html

<app-item-selector (itemSelected)="handleSelection($event)">

Dernière sélection : {{ lastSelectedItem }}

Bonne pratique : Définissez toujours clairement le nom de l'événement et n'utilisez EventEmitter que pour la communication entre composants, pas pour les services (où les Subjects RxJS sont préférables).