Get *ngFor Index using 3 Ways in Angular 15 with Example

Here we will discuss how to get key index while using the *ngFor iteration on list items by using three methods.

In Angular, you can use the ngFor directive to iterate over an array or collection of data and display it on your web page. When working with ngFor, you might need to access the index of the current item in the iteration. In this tutorial, we will look at three different ways to get the index in ngFor.

 

How to Get Index Key in NgFor Directive?

You can use any of the following 3 methods to get key index in ngFor loop:

• Method 1: Index variable
• Method 2: NgForOf directive
• Method 3: NgForTrackBy function

 

Method 1: Using the index variable

The first and most common way to get the index in ngFor is to use the built-in index variable that comes with the directive. Here’s an example:

<ul>
  <li *ngFor="let item of items; index as i">{{ i }} - {{ item }}</li>
</ul>

In the above example, we’re using index as i to assign the current index to the variable i. We can then use i inside the li element to display the current index of the item in the iteration.

 

Method 2: Using the ngForOf directive

Another way to get the index in ngFor is to use the ngForOf directive. Here’s an example:

<ul>
  <li *ngFor="let item of items; let i = index">{{ i }} - {{ item }}</li>
</ul>

We’re using let i = index to assign the current index to the variable i. We can then use i inside the li element to display the current index of the item in the iteration.

 

Method 3: Using the ngForTrackBy function

The third way to get the index in ngFor is to use the ngForTrackBy function. This method is useful when you need to update the items in the array and want to preserve the state of the items after the update. Here’s an example:

<ul>
  <li *ngFor="let item of items; trackBy: trackByFn">{{ getIndex(item) }} - {{ item.name }}</li>
</ul>

In this example, we’re using the trackBy function to keep track of the items in the iteration. The trackByFn function returns the unique identifier of the item, which Angular uses to track the changes to the items. We can then use the getIndex function to get the index of the item in the array.

getIndex(item: any): number {
  return this.items.indexOf(item);
}

trackByFn(index: number, item: any): number {
  return item.id;
}

Here we are using the indexOf method to get the index of the item in the array. We’re also using the id property of the item as the unique identifier for the trackBy function.

That’s it! These are three different ways to get the index in ngFor in Angular 10. Choose the method that works best for your use case.