How to Access the Index Inside *ngFor in Angular

Introduction

*ngFor directive is a powerful tool for rendering lists of data in your application’s templates. Often, you may want to access the index of the current item within the loop to perform specific tasks or apply styles conditionally. In this blog, we’ll explore various ways to access the index inside *ngFor in Angular.

Understanding *ngFor

Before we dive into accessing the index, let’s look into how *ngFor works. It is an Angular structural directive used to iterate over an array or collection and create a template for each item in the collection. Here’s a basic example:

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

In this example, *ngFor iterates over the items array and assigns each item to the item variable. We also use let i = index to capture the index of the current item in the loop.

Accessing the Index inside *ngFor

Now, let’s explore how you can access the index inside *ngFor:

1. Using the index variable

As shown in the previous example, you can use let i = index to access the index directly. This allows you to use the i variable within the loop.

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

2. Using a method

You can create a method in your component to access the index. First, define a method in your component class:

getIndex(index: number) {
  return index;
}

Then, use this method in your template:

<ul>
  <li *ngFor="let item of items; let i = index">{{ getIndex(i) }}: {{ item }}</li>
</ul>

3. Using ng-container

If you need to access the index but don’t want to display it directly, you can use an ng-container element to wrap your content:

<ul>
  <ng-container *ngFor="let item of items; let i = index">
    <li>Index: {{ i }}</li>
    <li>Item: {{ item }}</li>
  </ng-container>
</ul>

4. Using a structural directive

You can create a custom structural directive to encapsulate the logic for accessing the index. This approach is useful when you have complex logic to determine the index.

Here’s a simplified example of a custom directive:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appIndex]'
})
export class IndexDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {}

  @Input() set appIndex(index: number) {
    this.viewContainer.clear();
    for (let i = 0; i < index; i++) {
      this.viewContainer.createEmbeddedView(this.templateRef, { $implicit: i });
    }
  }
}

Usage

<ul>
  <ng-container *appIndex="items.length">
    <li *ngFor="let item of items; let i = index">
      Index: {{ i }}
      Item: {{ item }}
    </li>
  </ng-container>
</ul>

Conclusion

In Angular, accessing the index inside *ngFor is straightforward, and you have multiple options to achieve this. Depending on your specific use case, you can choose the method that best fits your requirements. Whether you use the built-in index variable or create custom solutions, Angular’s flexibility allows you to work efficiently with lists of data in your application.

Finally, for more such updates and to read more about such topics, please follow our LinkedIn page Frontend Competency