Memanggil Komponen dalam Loop di Angular

Kita juga dapat memanggil komponen dalam loop, dengan meneruskan berbagai parameter kepadanya melalui atribut. Mari kita coba dalam praktik. Misalkan kita memiliki properti berikut dengan pengguna:

interface User {
	name: string,
	age: number
}

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

Mari kita ulang pengguna dengan loop, di setiap iterasi memanggil komponen child dengan pengguna dan menyerahkan nama dan usia sebagai parameter kepadanya:

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

Diberikan array berikut dengan produk:

interface Product {
	name: string,
	cost: number
}

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

Ulangi array ini dengan loop, setiap kali membuat komponen baru dengan produk.