Trasmissione dei dati al componente genitore in Angular

È possibile trasmettere dati dal componente figlio al componente genitore. Questo viene fatto emetendo eventi utilizzando un oggetto speciale EventEmitter e il metodo emit. Il componente figlio emetterà eventi, trasmettendo insieme all'evento alcuni dati, mentre il componente genitore catturerà gli eventi, ricevendo i dati dal componente figlio.

Proviamo nella pratica. Per fare ciò dobbiamo compiere una serie di passi. Per iniziare nel nostro componente figlio importiamo il decoratore @Output e la classe EventEmitter:

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

Ora nella classe figlia creiamo una proprietà onData, il cui valore sarà un nuovo oggetto EventEmitter, contenente una stringa:

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

Ora creiamo un metodo send, la cui chiamata emetterà un evento onData al componente genitore con il testo specificato:

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

Nel template del componente figlio creiamo un pulsante, al cui click verrà chiamato il metodo send:

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

Nel componente genitore creiamo un metodo onData, che verrà chiamato automaticamente quando dal componente figlio verrà emesso l'evento corrispondente. Nel parametro del metodo arriveranno i dati trasmessi:

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

Nel template del componente genitore colleghiamo al tag del componente figlio l'evento:

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

Nel componente figlio create tre pulsanti, che emettono eventi diversi. Catturate gli eventi emessi nel componente genitore.