Angular Icon Get 67% off the Angular Master Bundle!

See the bundle then add to cart and your discount is applied.

0 days
00 hours
00 mins
00 secs

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:

  *ngFor="let todo of todos"

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:

  *ngFor="let todo of todos; index as i"

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">

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.

JavaScript Array Methods eBook Cover

🎉 Download it free!

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

  • Green Tick Icon Fully understand how to manage JavaScript Data Structures with immutable operations
  • Green Tick Icon 31 pages of deep-dive syntax, real-world examples, tips and tricks
  • Green Tick Icon Write cleaner and better-structured programming logic within 3 hours

As an extra bonus, we'll also send you some extra goodies across a few extra emails.


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!

Related blogs 🚀

Free eBooks:

JavaScript Array Methods eBook Cover

Ready to go beyond ForEach? Get confident with advanced methods - Reduce, Find, Filter, Every, Some and Map.

NestJS Build a RESTful CRUD API eBook Cover

Build your first NestJS app. With the CLI you'll learn the basics of real-world NestJS development.