How can I define the index variable in @for in Angular 17
const users = [
{ id: 1, name: 'Ali' },
{ id: 2, name: 'reza' },
{ id: 3, name: 'jack' },
];
<ul>
@for (user of users; track user.id; let i = index) {
<li>{{ user.name + i }}</li>
} @empty {
<span>Empty list of users</span>
}
</ul>
index is not known as we had in *ngFor and got Unknown "let" parameter variable "index" in Angular17 @for
But the following is working:
<ul>
<li *ngFor="let user of users; let i = index">{{ user.name + i }}</li>
</ul>
Just $ was missing, it should be $index rather than index. Also there are some other contextual variables rather than $index REF:
| Variable | Meaning |
|---|---|
| $count | Number of items in a collection iterated over |
| $index | Index of the current row |
| $first | Whether the current row is the first row |
| $last | Whether the current row is the last row |
| $even | Whether the current row index is even |
| $odd | Whether the current row index is odd |
and the usage would be:
@for (item of items; track item.id; let idx = $index, e = $even) {
Item #{{ idx }}: {{ item.name }}
}
We can also utilize our existing template and execute this command to migrate to control-flow.
ng g @angular/core:control-flow