Blog>
Snippets

Extracting the Index with ngFor

Utilize the index variable in ngFor to display the index of each item in a list next to the item name.
<ul>
  <li *ngFor="let item of items; let i = index">
    {{ i + 1 }} - {{ item }}
  </li>
</ul>
This is an Angular template snippet using *ngFor to iterate over an array called items. It utilizes a local template variable i, assigned to index which represents the current index of each item in the array. During each iteration, the index (1-based) and the item name are displayed within a list item (<li>) element.