Фаромӯхтани компонент дар давр дар 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,
		},
	];
}

Ин массивро бо давр такрор кунед, ҳар дафъа компоненти нав бо маҳсулот эҷод кунед.