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

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

app/user/user.component.tsinterface User {
  name: string,
  age: number
}

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

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

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

typescriptinterface Product {
  name: string,
  cost: number
}

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