Transmission de données à un composant enfant dans Angular

Il est possible de transmettre des données d'un composant parent à un composant enfant. Ces données seront injectées dans les propriétés de la classe enfant. Voyons comment procéder.

Pour commencer, créons dans la classe du composant enfant des propriétés qui recevront les données du composant parent :

class UserComponent {
	public name: string = '';
	public age: number = 0;
}

Nous devons maintenant déclarer que ces propriétés recevront des données de l'extérieur. Pour cela, on utilise le décorateur spécial Input. Importons-le dans notre composant enfant :

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

Et maintenant, appliquons ce décorateur à nos propriétés :

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

Ajoutons l'affichage des données dans le fichier de template du composant enfant :

<p>{{ name }}</p>
<p>{{ age }}</p>

Maintenant, dans le template du parent, lors de l'appel de la balise du composant enfant, écrivons des attributs dont les noms correspondent aux noms de nos propriétés de la classe enfant. Les valeurs de ces attributs seront injectées dans les propriétés de la classe enfant :

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