I have a simple ngFor loop which also keeps track of the current index. I want to store that index value in an attribute so I can print it. But I can't figure out how this works.
I basically have this:
<ul *ngFor="#item of items; #i = index" data-index="#i">
<li>{{item}}</li>
</ul>
I want to store the value of #i in the attribute data-index. I tried several methods but none of them worked.
I have a demo here: http://plnkr.co/edit/EXpOKAEIFlI9QwuRcZqp?p=preview
How can I store the index value in the data-index attribute?
I would use this syntax to set the index value into an attribute of the HTML element:
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>
<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.
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; index as i">
<li>{{i+1}} {{item}}</li>
</ul>
Angular.io ▸ API ▸ NgForOf
Unit test examples
Another interesting example
Just an update to this, Thierry's answer is still correct, but there has been an update to Angular2 with regards to:
<ul *ngFor="let item of items; let i = index" [attr.data-index]="i">
<li>{{item}}</li>
</ul>
The #i = index should now be let i = index
EDIT/UPDATE:
The *ngFor should be on the element you're wanting to foreach, so for this example it should be:
<ul>
<li *ngFor="let item of items; let i = index" [attr.data-index]="i">{{item}}</li>
</ul>
EDIT/UPDATE
Angular 5
<ul>
<li *ngFor="let item of items; index as i" [attr.data-index]="i">{{item}}</li>
</ul>
EDIIT/UPDATE
Angular 7/8
<ul *ngFor="let item of items; index as i">
<li [attr.data-index]="i">{{item}}</li>
</ul>