Angular mette a disposizione la direttiva ngFor per ciclare gli elementi di una lista di oggetti in un template HTML. Nella versione base, questa direttiva permette di accedere a un elementeo per volta e di renderizzare un frammento di HTML per ogni elemento.

Tuttavia, esistono casi in cui abbiamo bisogno di accedere non solo all'elemento, ma anche al suo indice all'interno della lista (un tipico esempio è quando vogliamo sapere se l'indice è pari o dispari, o se vogliamo mostrare la posizione a video).

Per recuperare l'indice basta passare una seconda istruzione alla direttiva ngFor come mostrato nel prossimo esempio.

<div *ngFor="let p of products; let i = index">{{i + 1}} - {{p.name}}</div>

L'istruzione let i = index assegna alla variabile i l'indice dell'elemento correntemente ciclato.