CODEWITHSUNDEEP
angularngfor
Marvin Ericson
Marvin Ericson

Reputation: 259

How to loop with multiple *ngFor with different div - Angular 5

I have response with this json hierarchy (content -> categories -> items) the content contains object of categories and each categories contains object of items. So I tried this:

<div *ngFor="let content of data">
    <span>{{content.name}}</span>
    <div *ngFor="let category of content.categories">
        <span>.....</span>
    </div>
</div>
<div *ngFor="let item of category.items">
    <span>{{item.type}}</span> //this item is undefined because it is out of category looping div
</div>

Upvotes: 1

Views: 12888

Answers (3)

Swoox
Swoox

Reputation: 3750

Based on the comment of post in @Teun I think you want:

<div *ngFor="let content of data">
  <span>{{content.name}}</span>
  <div *ngFor="let category of content.categories">
    <span (click)="selectedCategory = category">.....</span>
  </div>
</div>
<div *ngIf="selectedCategory !== undefined">
  <div *ngFor="let item of selectedCategory">
    <span>{{item.type}}</span>
  </div>
</div>

Upvotes: 1

Aniket Avhad
Aniket Avhad

Reputation: 4145

The scope of *ngFor object is inside closing tag not outside of that so for achieve this you can use ng-template

you can do like this,

<ng-template let-content ngFor [ngForOf]="data">

   <span>{{content.name}}</span>
   <ng-template let-category ngFor [ngForOf]="content.categories">
      <span>{{category.name}}</span>

      <div *ngFor="let item of category.items">
        <span>{{item.name}}</span>
      </div>
    </ng-template>

</ng-template>

and in .ts

data = [{
     categories: [{
       name: 'xyz',
        items: [{
          name: 'item1'
        }]
     }]
   }];

Upvotes: 3

Teun
Teun

Reputation: 926

Place the for loop of the items also inside the div looping through the categories. If you want this div to be outside of the category, then you have to make more loops there as well.

<div *ngFor="let content of data">
    <span>{{content.name}}</span>
    <div *ngFor="let category of content.categories">
        <span>.....</span>    
         <div *ngFor="let item of category.items">
               <span>{{item.type}}</span> //this item is undefined because it is out of category looping div
         </div>
    </div>
</div>

Categories outside of the other loops:

<div *ngFor="let content of data">
  <span>{{content.name}}</span>
  <div *ngFor="let category of content.categories">
    <span>.....</span>
  </div>
</div>
<div *ngFor="let content of data">
  <div *ngFor="let category of content.categories">
    <div *ngFor="let item of category.items">
      <span>{{item.type}}</span>
    </div>
  </div>
</div>

Upvotes: 0

Related Questions