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:

app/user/user.component.tsimport { 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:

app/user/user.component.tsexport 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:

app/user/user.component.tsexport 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:

app/user/user.component.html<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:

app/app.component.tsexport class AppComponent {
  public onData(data: string) {
    console.log(data);
  }
}

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

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