Accessing the index inside NgFor

In this post you’re going to learn how to access the index of the current array element using Angular’s NgFor directive!

Over the last few years, Angular’s NgFor syntax has changed quite substantially, from the # character to denote a template variable, through to using the new let keyword.

The way we access the index with NgFor is through what’s called a “local variable”. Each iteration inside the NgFor “loop” exposes to us a set of local variables - index, count, first, last, even, odd.

You can see all other variables exposed to us in the NgForOf documentation.

I’ll show you more on this in a moment, but first here’s what a typical NgFor would look like:

<todo-item
  *ngFor="let todo of todos"
  [todo]="todo">
</todo-item>

But let’s say for some reason we want to access the index, just like we could inside a typical Array.prototype.forEach, we can use the following syntax to expose the index variable:

<todo-item
  *ngFor="let todo of todos; index as i"
  [todo]="todo"
  [index]="i">
</todo-item>

Yep, index as i is the latest Angular syntax for accessing the local index variable inside NgFor. In earlier Angular version you would use let i = index; and prior to that #i = index.

You could also use {{ i }} directly inside the NgFor to log out the value - perhaps you’re using NgFor with a list or other scenario, but I like to think in components when possible.

For more advanced cases, you’ll want to think about using the <ng-template> syntax which expands the NgFor directive to include NgForOf, here’s how we do that:

<ng-template ngFor let-todo [ngForOf]="todos" let-i="index">
  <todo-item 
    [todo]="todo"
    [index]="i">
  </todo-item>
</ng-template>

Notice let-i and let-todo are both declaring the variables we’d like to access (to pass into [todo] and [index]). We then specify to [ngForOf] that we’d like to iterate the todos array. You can see now how *ngFor works under the hood.

Free eBook

Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.

• Observables and Async Pipe
• Identity Checking and Performance
• Web Components <ng-template> syntax
• <ng-container> and Observable Composition
• Advanced Rendering Patterns
• Setters and Getters for Styles and Class Bindings

Download

That went smoothly, check your email.

Summary

So, that’s it - how to access the current array element in Angular’s NgFor directive. It’s helpful to uncover things like this, especially given the previous ways to access the index.

Use the typical *ngFor style alongside index as i and you’re good to go. For the more advanced templating cases, use the <ng-template> syntax with NgFor and access your let-i="index" variable (however it doesn’t really explain the index as i syntax for the *ngFor style and the let-i approach for the expanded syntax).

If you are serious about your Angular skills, your next step is to take a look at my Angular courses where you’ll learn Angular, TypeScript, RxJS and state management principles from beginning to expert level.

Happy coding!