Κλήση συστατικού σε βρόχο στο Angular

Μπορείτε επίσης να καλέσετε ένα συστατικό σε βρόχο, περνώντας του σε χαρακτηριστικά διάφορες παραμέτρους. Ας δοκιμάσουμε στην πράξη. Ας υποθέσουμε ότι έχουμε την ακόλουθη ιδιότητα με χρήστες:

interface User {
	name: string,
	age: number
}

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

Ας διατρέξουμε τους χρήστες με βρόχο, σε κάθε επανάληψη καλώντας ένα θυγατρικό συστατικό με τον χρήστη και περνώντας του ως παραμέτρους το όνομα και την ηλικία:

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

Δίνεται ο ακόλουθος πίνακας με προϊόντα:

interface Product {
	name: string,
	cost: number
}

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

Διατρέξτε με βρόχο αυτόν τον πίνακα, κάθε φορά δημιουργώντας ένα νέο συστατικό με το προϊόν.