How To Iterate Nested Array using NgFor in Angular

In Angular, it’s common to have nested arrays or objects that you want to display using ngFor. To iterate over a nested array using ngFor, you can use nested ngFor loops.

Here’s an example of how to iterate over a nested array using ngFor:

<div *ngFor="let outerItem of outerArray">
  <h2>{{ outerItem.title }}</h2>
  <ul>
    <li *ngFor="let innerItem of outerItem.innerArray">
      {{ innerItem.name }}
    </li>
  </ul>
</div>

We’re iterating over an array called outerArray. Each item in the outerArray has a title property and an innerArray property, which is another array of items.

We’re using an outer ngFor loop to iterate over the outerArray and display the title property of each item in a heading. Then, we’re using an inner ngFor loop to iterate over the innerArray property of each item and display the name property of each inner item in a list.

Here’s an example of how to iterate over a nested object using ngFor:

<div *ngFor="let item of items">
  <h2>{{ item.title }}</h2>
  <ul>
    <li *ngFor="let subItem of item.subItems">
      {{ subItem.name }}
    </li>
  </ul>
</div>

In this example, we’re iterating over an array called items. Each item in the items array has a title property and a subItems property, which is an object with properties.

We’re using an outer ngFor loop to iterate over the items array and display the title property of each item in a heading. Then, we’re using an inner ngFor loop to iterate over the subItems property of each item and display the name property of each sub-item in a list.