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.