Angular में लूप में कंपोनेंट को कॉल करना

आप लूप में कंपोनेंट को कॉल भी कर सकते हैं, इसके एट्रिब्यूट्स में विभिन्न पैरामीटर्स पास करके। आइए प्रैक्टिस में ट्राई करते हैं। मान लीजिए कि हमारे पास यूजर्स के साथ निम्नलिखित प्रॉपर्टी है:

interface User {
	name: string,
	age: number
}

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

यूजर्स को लूप के through iterate करें, प्रत्येक इटरेशन में चाइल्ड कंपोनेंट को यूजर के साथ कॉल करें और इसे नाम और उम्र पैरामीटर के रूप में पास करें:

<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,
		},
	]; 
}

इस ऐरे को लूप के through iterate करें, हर बार प्रोडक्ट के साथ एक नया कंपोनेंट बनाएं।