ngFor in Angular | @for angular 17

ngFor
@for
Array
Object
json

ngFor

(for Angular 16 and below)

NgFor directive is used to create DOM Elements using loop. This can build n number of elements as per requirement.

NgFor is used to iterate iterables like Arrays and create DOM Elements.

ngFor with Array

swift
baleno
fronx

        <!-- app.component.ts -->

export class AppComponent {
  cars=["swift","baleno","fronx"];
}

        <!-- app.component.html -->

<ol>
    <li *ngFor="let i of cars">{{i}}</li>
</ol>

ngFor with Objects

name is Swift
power is 90
torque is 113

        <!-- app.component.ts -->

export class AppComponent {
    car={name:"swift",power:90,torque:113};
}

        <!-- app.component.html -->

<ol>
    <li *ngFor="let i of car | keyvalue">
        {{i.key}} is {{i.value}}
    </li>
</ol>

The pipe keyvalue is only supported in Angular 6.1.0 and onwards.

@for

Angular 17 introduced @for block to iterate over iterators instead of ngFor directive. @for can iterate Array, JSON ,strings, but not objects as objects are not iterators in javascript.

@for example in Angular

0 : swift

1 : baleno

2 : fronx

        <!-- app.component.ts -->

export class AppComponent {
  cars=["swift","baleno","fronx"];
}

        <!-- app.component.html -->

  @for (item of cars; track $index) {
    <p>{{$index}} : {{item}}</p>
  }

@empty in for loop

@empty is optionally used if array or object is empty.

No cars found

        <!-- app.component.ts -->

export class AppComponent {
cars=[];
}

        <!-- app.component.html -->

<ol>
@for (item of cars; track $index) {
  <li>{{$index}} : {{item}}</li>
}
</ol>

@empty {
  <p>No cars found</p>
}

JSON Object

ngFor is also use for JSON data like, Array of objects, Objects with Array or nested arrays or objects. ngFor is same for both Arrays and Objects.

JSON in Angular 17 and above

Name	Type	Price

        <!-- app.component.ts -->

export class AppComponent {
cars=[
  {"name": "swift", "type": "hatchback", "price":810000},
  {"name": "dzire", "type": "hatchback", "price":880000},
  {"name": "ciaz", "type": "sedan", "price":1000000},
  {"name": "baleno", "type": "hatchback", "price":850000},
  {"name": "brezza", "type": "suv", "price":1400000},
  {"name": "fronx", "type": "hatchback", "price":1000000},
  {"name": "jimny", "type": "suv", "price":1300000}
  ];
}

        <!-- app.component.html -->

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
  @for (i of cars; track i.name ){
    <tr>
      <td>{{i.name}}</td>
      <td>{{i.type}}</td>
      <td>{{i.price}}</td>
    </tr>
  }
  </tbody>
</table>

JSON Data in Angular 16 or less

        <!-- app.component.ts -->

export class AppComponent {
cars=[
  {"name": "swift", "type": "hatchback", "price":810000},
  {"name": "dzire", "type": "hatchback", "price":880000},
  {"name": "ciaz", "type": "sedan", "price":1000000},
  {"name": "baleno", "type": "hatchback", "price":850000},
  {"name": "brezza", "type": "suv", "price":1400000},
  {"name": "fronx", "type": "hatchback", "price":1000000},
  {"name": "jimny", "type": "suv", "price":1300000}
  ];
}

        <!-- app.component.html -->

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let i of cars">
      <td>{{i.name}}</td>
      <td>{{i.type}}</td>
      <td>{{i.price}}</td>
    </tr>
  </tbody>
</table>

@for for Objects

@for doesn't iterate over JS objects as objects are not iterables. A simples solution is to convert objects to array and then iterate. We can use Object.entries(obj) to convert Object to Array.

name:swift
power:90
torque:115

        <!-- app.component.ts -->
    
    export class AppComponent {
      car={name:"swift", power:90, torque:115};
    }

        <!-- app.component.html -->
    
    <ol>
    @for (i of cars | keyvalue; track $index) {
      <li>{{i.key}} : {{i.value}}</li>
    }
    </ol>