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:

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

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

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