CODEWITHSUNDEEP
angulartypescript
Anna F
Anna F

Reputation: 1683

Multiply ngFor Angular 2

I would like to pass two arguments with ngFor, something like this 

<mat-card *ngFor="let room of arr; let floor of floorArr">
  <mat-card-content>
    <h3>Room Number: {{room}}</h3>
    <p>Floor: {{floor}}</p>
  </mat-card-content>
</mat-card>

Could you please help me - is is possible to do something like this? What would be the right way to write this?

Upvotes: 0

Views: 381

Answers (1)

Zze
Zze

Reputation: 18805

You could include an index reference and then access the array via that:

<mat-card *ngFor="let room of arr; let i = index">
  <mat-card-content>
    <h3>Room Number: {{room}}</h3>
    <p>Floor: {{floorArr[i]}}</p>
  </mat-card-content>
</mat-card>

The other option is to map this to a combined array and then iterating like so:

getArray(){
   return this.arr.map((a, i) => ({ room: a, floor: this.floorArr[i] }));
};


<mat-card *ngFor="let obj of getArray()">
  <mat-card-content>
    <h3>Room Number: {{obj .room}}</h3>
    <p>Floor: {{obj.floor}}</p>
  </mat-card-content>
</mat-card>

Upvotes: 1

Related Questions