Component aanroepen in een lus in Angular

Het is ook mogelijk om een component in een lus aan te roepen, door verschillende parameters aan hem door te geven in de attributen. Laten we het in de praktijk proberen. Stel dat we de volgende eigenschap met gebruikers hebben:

interface User {
	name: string,
	age: number
}

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

Laten we de gebruikers in een lus doorlopen, in elke iteratie het onderliggende component met de gebruiker aanroepen en naam en leeftijd als parameters doorgeven:

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

De volgende array met producten is gegeven:

interface Product {
	name: string,
	cost: number
}

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

Doorloop deze array in een lus, elke keer een nieuw component met het product aanmakend.