CODEWITHSUNDEEP
javascriptangularangular2-directivesngfor
Pratap A.K
Pratap A.K

Reputation: 4517

Angular2 single ngFor for multiple arrays

Is it possible to use multiple array's for ngFor in Angular?

   *ngFor="let device of element.devices && element.zones.devices"// something like this

export interface Element {
    id: string;
    name: string;   
    zones: Zone[];
    devices: Device[];
}

export class Zone {
    id: string;
    name: string;
    devices: Device[];
}

export class Device {
    id: string;
    name: string;
}

I'll be having access to Element object, from that I need to display all the devices and devices inside zones.

Upvotes: 0

Views: 3863

Answers (2)

Aravind
Aravind

Reputation: 41533

You can concatenate two arrays as below 

this.elements= arr1.concat(arr2);

In addition, to avoid the undefined error you should be using ? type safe operator as below

<div *ngFor="let device of elements?.devices">
    <span> {{device?.name}} </span>
</div>

Upvotes: 0

Tushar
Tushar

Reputation: 87203

Use concat to concatenate two arrays and then use ngFor over it

*ngFor = "let device of arr1.concat(arr2.devices)"

Upvotes: 5

Related Questions