In Angular Version 17+ using built in control flow:
<ul>
@for (item of items; track item; let i = $index) {
<li>
{{i+1}} {{item}}
</li>
}
</ul>
In Angular Version 5+:
<ul>
<li *ngFor="let item of items; index as i">
{{i+1}} {{item}}
</li>
</ul>
I would use this syntax to set the index value into an attribute of the HTML element:
Angular 2-4
You have to use let to declare the value rather than #.
<ul>
<li *ngFor="let item of items; let i = index" [attr.data-index]="i">
{{item}}
</li>
</ul>
AngularJS
<ul>
<li *ngFor="#item of items; #i = index" [attr.data-index]="i">
{{item}}
</li>
</ul>
Here is the updated plunkr: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview.
Answer from Thierry Templier on Stack OverflowAngular Wiki
angularjswiki.com › angular › how-to-get-index-of-element-in-ngfor-angular
How to get index of ngFor element in Angular | Angular Wiki
July 9, 2020 - Steps to get index of ngFor element in Angular 1. Declare a variable inside *ngFor directive using let or as keyword. for instance say indexofelement. 2. Assign the variable value to index 3. And display the index of ngFor element using angular ...
Top answer 1 of 11
1630
In Angular Version 17+ using built in control flow:
<ul>
@for (item of items; track item; let i = $index) {
<li>
{{i+1}} {{item}}
</li>
}
</ul>
In Angular Version 5+:
<ul>
<li *ngFor="let item of items; index as i">
{{i+1}} {{item}}
</li>
</ul>
I would use this syntax to set the index value into an attribute of the HTML element:
Angular 2-4
You have to use let to declare the value rather than #.
<ul>
<li *ngFor="let item of items; let i = index" [attr.data-index]="i">
{{item}}
</li>
</ul>
AngularJS
<ul>
<li *ngFor="#item of items; #i = index" [attr.data-index]="i">
{{item}}
</li>
</ul>
Here is the updated plunkr: http://plnkr.co/edit/LiCeyKGUapS5JKkRWnUJ?p=preview.
2 of 11
492
In Angular 5/6/7/8:
<ul>
<li *ngFor="let item of items; index as i">
{{i+1}} {{item}}
</li>
</ul>
In older versions
<ul *ngFor="let item of items; let i = index">
<li>{{i+1}} {{item}}</li>
</ul>
Angular.io ▸ API ▸ NgForOf
- Description
- Local variables
Unit test examples
- ng_for_spec.ts
Another interesting example
- Grouping
Videos
03:02
Accessing Index Outside *ngFor in Angular: Tips and Solutions - ...
07:08
#13 🌟 Angular 19 Tutorial: Mastering ngFor for Dynamic Data ...
03:08
Mastering Index in Angular 17: *ngFor and @for Loops - YouTube
Mastering *ngFor in Angular: Looping Through Specific ...
01:42
How to Display the Index Data in an *ngFor Loop in Angular - YouTube
16:31
Utiliza arrays y la directiva ngFor en 🅰 Angular 19 | Potencia ...
Angular
angular.dev › api › common › NgFor
NgFor • Angular
Useful when the expression is more complex then a property access, for example when using the async pipe (userStreams | async). index: number: The index of the current item in the iterable.
Ultimate Courses
ultimatecourses.com › blog › angular-ngfor-index
Accessing the index inside NgFor - Ultimate Courses
March 1, 2023 - 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 behind the scenes. So, that’s how to access the current array index with the Angular NgFor directive.
Angular University
blog.angular-university.io › angular-2-ngfor
Angular ngFor: Complete Guide
March 8, 2025 - If that happens to be the case, we can configure ngFor to do the tracking by something else other than object identity. We can provide our own mechanism for tracking items in a list by using trackBy. We need to pass a function to trackBy, and the function takes a couple of arguments, which are an index and the current item:
Bacancy Technology
bacancytechnology.com › qanda › angular › angular-ngfor-index
Harnessing Angular ngFor Index as Value in Attribute
If you want to store the value of i in the data-index attribute, then you need to make data-index as attribute · //for angular 2+ <ul> <li *ngFor="let item of items; let i = index" [attr.data-index]="i"> {{item}} </li> </ul>
Zero To Mastery
zerotomastery.io › blog › angular-ngfor-guide
Beginners Guide To Angular ngFor (With Code Examples) | Zero To Mastery
This is because Angular's ngFor uses the index only for read operations, and making changes to it won't affect the original array.
CodeCraft
codecraft.tv › courses › angular › built-in-directives › ngfor
NgFor • Angular - CodeCraft
The syntax is *ngFor="let <value> of <collection>". <value> is a variable name of your choosing, <collection> is a property on your component which holds a collection, usually an array but anything that can be iterated over in a for-of loop.
Codyburleson
codyburleson.com › blog › index-of-item-within-angular-ngfor-loop
Index of Item Within Angular NgFor Loop | Cody Burleson
<tr *ngFor="#item of data; #ndx = index"> <td>{{ndx+1}}</td> <td>{{item.po}}</td> <td>{{item.serviceType}}</td> <td>{{item.validStart}}</td> ...
GeeksforGeeks
geeksforgeeks.org › angularjs › how-to-use-ngfor-with-index-as-value-in-attribute-in-angular
How to use ngFor with index as value in Attribute in Angular ? - GeeksforGeeks
April 28, 2025 - // app.module.ts import { NgModule ... we will use let i=index. Here, the index is an attribute in ngFor which tells the sequence of the object retrieved....
Prospera Soft
prosperasoft.com › blog › web-app-development › angular › angular-ngfor-index-usage
Using ngFor with Index in Angular Templates
This approach can be particularly useful for tasks like adding unique identifiers or classes based on the index. For instance, you might want to create a unique aria-label for accessibility or differentiate between items visually. ... <div *ngFor='let item of items; let i = index' [attr.data-index]='i'> <h3>Item {{item.name}}</h3> </div>
Angular
v17.angular.io › api › common › NgForOf
Angular
Angular is a platform for building mobile and desktop web applications. Join the community of millions of developers who build compelling user interfaces with Angular.
Coryrylan
coryrylan.com › blog › angular-ng-for-syntax
Angular ngFor syntax - Angular 17 | 16
November 17, 2022 - So below is the typical syntax for an Angular list. <ul> <li *ngFor="let item of items; let i = index"> {{i}} {{item}} </li> </ul>
Codemia
codemia.io › knowledge-hub › path › ngfor_with_index_as_value_in_attribute
ngFor with index as value in attribute
Enhance your system design skills with over 120 practice problems, detailed solutions, and hands-on exercises
Reddit
reddit.com › r/angular › how to pass the index of *ngfor to a property in the component?
r/angular on Reddit: How to pass the index of *ngFor to a property in the component?
July 14, 2020 -
I have a div like this hosted by an Angular component. I want to pass the value of the index to a component property so I did this
<div *ngFor='let key of [1,2,3]; let i = index' >
{{ test(i) }}
</div>and test() is defined as
test(i: number)
{
this.cgindex = i;
console.log(`i = ${i}`);
if (i == 0)
this.count += 1;
console.log(`count = ${this.count}`);
}cgindex is the component property I am setting. The property is used to do some calculations for every loop iteration.
A couple of questions:
1- Is there a better way to update the property value? I don't like this method call of setting the value.
2- I noticed every time I clicked on the page, logging happens. My guess Angular is revaluating everything with every mouse click and calling test() multiple times. That's why I don't like this implementation.
Top answer 1 of 3
3
Yeah, you've seen right, when you have a function in the HTML template it will be verified more times than necessary, I would advise you to avoid like hell to use functions in the template, the bigger the function the slower the evaluation because it runs lots of times and because it really doesn't know what the value is for that iteration. Why don't you do the calculations before something happens? As it seems you want to count the number of 0 in the array and update a counter. Use array reduce to know how many 0 in the array and display the array as you have with ngFor. No function needed and you can do this only once in ngOnInit
2 of 3
3
Depending on what you need to do with the value, one solution would be to set it in an event handler, e.g.: Test If you simply want to set a single property in the click handler, you can do (click)="cgindex = i". Your other option is to create nested components with an index input: The first option will be useful when you want to react to a particular element being interacted with, the second is for child components being aware of their order, whatever you'd want to use that knowledge for (you probably don't). Edit: expanded the answer
Angular
angular.dev › api › common › NgForOf
NgForOf • Angular
Useful when the expression is more complex then a property access, for example when using the async pipe (userStreams | async). index: number: The index of the current item in the iterable.
TypeOfNaN
typeofnan.dev › how-to-access-index-in-angular-ngfor-loop
How to access the index in an Angular ngFor loop | TypeOfNaN
August 20, 2022 - <ul> <li *ngFor="let todo of todos; let i = index"> Todo {{ i + 1 }}: {{ todo }} </li> </ul>
Angular
v2.angular.io › docs › ts › latest › api › common › index › NgFor-directive.html
NgFor - ts - API
NgFor provides several exported values that can be aliased to local variables: index will be set to the current loop iteration for each template context.
Angular University
blog.angular-university.io › angular-for
Angular @for: Complete Guide
February 23, 2026 - We also learned how we can use it with the $index, $first, $last, $odd, $even, and $count implicit variables that we are familiar with in the traditional NgFor directive.