Html Question posted in
Some basic documentation can be found here.

How to use index in @for in html angular 17

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>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you guys for your answer also I have found some other contextual variables rather than $index Here:

    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 }}
}

  2. 0

    You can use $index everywhere in the scope of the @for block without having to alias it:

    <ul>
  @for (user of users; track user.id) {
     <li>{{ user.name + $index }}</li>
  } @empty {
     <span>Empty list of users</span>
  }
</ul>
    Login or Signup to reply.
  3. 0

    you can also write this

    <ul>
  @for (user of users; track user.id; let idx = $index) {
     <li>{{ user.name + idx }}</li>
  } @empty {
     <span>Empty list of users</span>
  }
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search