Transmission de données au composant parent dans Angular

Il est possible de transmettre des données d'un composant enfant à un composant parent. Cela se fait en émettant des événements à l'aide d'un objet spécial EventEmitter et de la méthode emit. Le composant enfant émettra des événements, en transmettant avec l'événement certaines données, et le composant parent attrapera les événements, en recevant les données du composant enfant.

Essayons cela en pratique. Pour cela, nous devons effectuer une série d'étapes. Pour commencer, dans notre composant enfant, importons le décorateur @Output et la classe EventEmitter :

import { Component, Output, EventEmitter } from '@angular/core';

Maintenant, dans la classe enfant, créons une propriété onData, dont la valeur sera un nouvel objet EventEmitter, contenant une chaîne de caractères :

export class UserComponent {
	@Output()
	public onData = new EventEmitter<string>();
}

Maintenant, créons une méthode send, dont l'appel émettra un événement onData vers le composant parent avec le texte donné :

export class UserComponent {
	@Output()
	public onData = new EventEmitter<string>();
	
	send() {
		this.onData.emit('xxx');
	}
}

Dans le template du composant enfant, créons un bouton, dont le clic appellera la méthode send :

<button (click)="send()">
	send data
</button>

Dans le composant parent, créons une méthode onData, qui sera automatiquement appelée lorsque le composant enfant émettra l'événement correspondant. Les données transmises arriveront dans le paramètre de la méthode :

export class AppComponent {
	public onData(data: string) {
		console.log(data);
	}
}

Dans le template du composant parent, relions à la balise du composant enfant l'événement :

<app-user (onData)="onData($event)"></app-user>

Dans le composant enfant, créez trois boutons, émettant différents événements. Attrapez les événements émis dans le composant parent.