Trasmissione dei dati a un componente figlio in Angular

È possibile trasmettere dati dal componente genitore a quello figlio. Questi dati andranno nelle proprietà della classe figlia. Vediamo come si fa.

Per iniziare, creiamo nella classe del componente figlio le proprietà in cui verranno importati i dati dal componente genitore:

app/user/user.component.tsclass UserComponent {
  public name: string = '';
  public age: number = 0;
}

Ora dobbiamo dichiarare che in queste proprietà verranno inseriti dati dall'esterno. Per fare ciò viene utilizzato un decoratore speciale Input. Importiamolo nel nostro componente figlio:

app/user/user.component.tsimport { Input } from '@angular/core';

E ora applichiamo questo decoratore alle nostre proprietà:

app/user/user.component.tsclass UserComponent {
  @Input()
  public name: string = '';
  
  @Input()
  public age: number = 0;
}

Aggiungiamo l'output dei dati nel file del template del componente figlio:

app/user/user.component.html<p>{{ name }}</p>
<p>{{ age }}</p>

E ora nel template del genitore, quando richiamiamo il tag del componente figlio, scriviamo gli attributi, i cui nomi corrisponderanno ai nomi delle nostre proprietà della classe figlia. I valori di questi attributi andranno nelle proprietà della classe figlia:

app/app.component.html<user-data name="john" age="25"></user-data>