ngFor with index as value in attribute

I would use this syntax to set the index value into an attribute of the HTML element:

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>

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

• Description
• Local variables

Unit test examples

• ng_for_spec.ts

Another interesting example

• Grouping

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>