<ul>
<li *ngFor="let item of items; let i = index" [attr.data-index]="i">
{{item}}
</li>
</ul>
*ngFor="let item of items; index as i;"
// OR
*ngFor="let item of items; let i = index;"
// i will be the index, starting from 0
// and you can show it in the string interpolation with {{ i }}
<ul>
<li *ngFor="let item of items; index as i">
{{item}}
</li>
</ul>
<ul>
<li *ngFor="let food of menu; index as i">
{{ index }},{{ food }}
</li>
</ul>
<!-- index starts from 0
This gives an undordered list of food items in a menu, with the first item as 0-->
<ul>
<li *ngFor="let item of items; let i = index" [attr.data-index]="i">
{{item}}
{{i}}
</li>
</ul>
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>