Angular 17 @for Loop with Index Example

By Hardik Savani May 2, 2024 Category : Angular

Hey Folks,

In this comprehensive tutorial, we will learn angular 17 @for index. If you have a question about angular 17 for loop index then I will give a simple example with a solution. This article goes in detailed on @for index angular 17 example. step by step explain angular 17 @for loop index example. Let's see below example angular 17 @for index.

Angular provides for loop using ngFor but, Angular 17 changed the for loop flow flow with new syntax with index. You can use @for with index in angular 17. You can see one be one example with output and a new for loop with index and track.

Let's see the simple example code:


You can update the following code with the app.component.ts file:


import { Component } from '@angular/core';

import { CommonModule } from '@angular/common';


selector: 'app-root',

standalone: true,

imports: [CommonModule],

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']


export class AppComponent {

users = [

{ id: 1, name: 'Hardik Savani' },

{ id: 2, name: 'Keval Kashiyani' },

{ id: 3, name: 'Harshad Pathak' },



Here, update the app.component.html file:


<div class="container">

<!-- New @for loop -->


@for (user of users; track; let index = $index) {

<li>{{ index }}. {{ }}</li>

} @empty {

<span>Empty list of users</span>



<!-- Old ngFor loop -->

<li *ngFor="let user of users; let i = index;">

{{ i }}. {{}}




You will see the following output:

0. Hardik Savani

1. Keval Kashiyani

2. Harshad Pathak

I hope it can help you...