Appel de composant dans une boucle dans Angular

Il est également possible d'appeler un composant dans une boucle, en lui passant différents paramètres dans les attributs. Essayons cela en pratique. Supposons que nous ayons la propriété suivante avec des utilisateurs :

interface User {
	name: string,
	age: number
}

class UserComponent {
	public users: User[] = [
		{
			name: 'user1',
			age: 25,
		},
		{
			name: 'user2',
			age: 26,
		},
		{
			name: 'user3',
			age: 27,
		},
	]; 
}

Parcourons les utilisateurs avec une boucle, à chaque itération en appelant le composant enfant avec l'utilisateur et en lui passant le nom et l'âge en paramètres :

<div *ngFor="let user in users">
	<user-data [name]="user.name" [age]="user.age"></user-data>
</div>

Voici le tableau suivant de produits :

interface Product {
	name: string,
	cost: number
}

class ProductComponent {
	public products: Product[] = [
		{
			name: 'prod1',
			cost: 100,
		},
		{
			name: 'prod2',
			cost: 200,
		},
		{
			name: 'prod3',
			cost: 300,
		},
	]; 
}

Parcourez en boucle ce tableau, à chaque fois en créant un nouveau composant avec le produit.