Signup/Sign In
Ask Question
Not satisfied by the Answer? Still looking for a better solution?

NgFor with index as value in attribute

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.

How can I store the index value in the data-index attribute?
by

2 Answers

MounikaDasa
You can use [attr.data-index] directly to save the index to data-index attribute which is available in Angular versions 2 and above.

<ul*ngFor="let item of items; let i = index" [attr.data-index]="i">
<li>{{item}}</li>
</ul>
pankajshivnani123
Angular >= 2
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>

Angular = 1
<ul>
<li
ngFor="#item of items; #i = index" [attr.data-index]="i">
{{item}}
</li>
</ul>

Login / Signup to Answer the Question.