Angular - 5.6-Bind des événements personnalisés

Nous savons maintenant transmettre des données d'un composant parent vers un composant enfant via @Input(). Reste la direction inverse : comment le composant enfant peut-il prévenir son parent qu'il se passe quelque chose chez lui ? Par exemple, un CockpitComponent imbriqué dans AppComponent contient deux boutons qui doivent informer le parent qu'un nouveau serveur ou une nouvelle feuille de route vient d'être créé.

@Output et EventEmitter

Côté parent, on aimerait simplement écouter un événement personnalisé dans le template, comme on le ferait avec (click) :

<app-cockpit (serverCreated)="onServerAdded($event)"></app-cockpit>

Côté enfant, on déclare une propriété de type EventEmitter, décorée avec @Output() pour la rendre observable depuis l'extérieur. Quand l'utilisateur clique sur un bouton du cockpit, on appelle emit() avec les données utiles (le nom et le contenu du nouveau serveur, qui ne sont disponibles que dans l'enfant) :

• déclarer dans CockpitComponent : @Output() serverCreated = new EventEmitter<{ serverName: string; serverContent: string }>(); ;
• au clic du bouton, émettre : this.serverCreated.emit({ serverName: this.newServerName, serverContent: this.newServerContent }); ;
• dans AppComponent, implémenter onServerAdded(data) pour exploiter ces données et mettre à jour la liste centrale.

Avec ce pattern, le composant enfant reste autonome : il déclare son propre événement personnalisé et l'émet quand il le souhaite. Le composant parent, qui orchestre l'application, reçoit l'information via $event dans le template et exécute la logique métier appropriée. C'est ainsi qu'on remonte les changements de l'enfant vers le parent.