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:

class 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:

import { Input } from '@angular/core';

E ora applichiamo questo decoratore alle nostre proprietà:

class UserComponent {
	@Input()
	public name: string = '';
	
	@Input()
	public age: number = 0;
}

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

<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:

<user-data name="john" age="25"></user-data>