ngFor with index as value in attribute

Question

I have a simple ngFor loop which also keeps track of the current index  I want to store that index value in an attribute so I can print it  But I can t figure out how this works   I basically have this    lt ul  ngFor   item of items   i   index  data-index   i  gt       lt li gt   item   lt  li gt   lt  ul gt    I want to store the value of  i in the attribute data-index  I tried several methods but none of them worked   I have a demo here  http   plnkr co edit EXpOKAEIFlI9QwuRcZqp p preview  How can I store the index value in the data-index attribute

User · Accepted Answer

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.

User · Answer

Just an update to this  Thierry s answer is still correct  but there has been an update to Angular2 with regards to    lt ul  ngFor  let item of items  let i   index   attr data-index   i  gt     lt li gt   item   lt  li gt   lt  ul gt    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    lt ul gt     lt li  ngFor  let item of items  let i   index   attr data-index   i  gt   item   lt  li gt   lt  ul gt    EDIT UPDATE   Angular 5   lt ul gt     lt li  ngFor  let item of items  index as i   attr data-index   i  gt   item   lt  li gt   lt  ul gt    EDIIT UPDATE  Angular 7 8   lt ul  ngFor  let item of items  index as i  gt     lt li  attr data-index   i  gt   item   lt  li gt   lt  ul gt

User · Answer

Adding this late answer to show a case most people will come across  If you only need to see what is the last item in the list  use the last key word   lt div  ngFor  quot let item of devcaseFeedback reviewItems  let last   last quot  gt     lt divider  ngIf  quot  last quot  gt  lt  divider gt   lt  div gt   This will add the divider component to every item except the last  Because of the comment below  I will add the rest of the ngFor exported values that can be aliased to local variables  As are shown in the docs     implicit  T  The value of the individual items in the iterable  ngForOf   ngForOf  NgIterable  The value of the iterable expression  Useful when the expression is more complex then a property access  for example when using the async pipe  userStreams   async   index  number  The index of the current item in the iterable  count  number  The length of the iterable  count  number  The length of the iterable  first  boolean  True when the item is the first item in the iterable  last  boolean  True when the item is the last item in the iterable  even  boolean  True when the item has an even index in the iterable  odd  boolean  True when the item has an odd index in the iterable

User · Answer

I think its already been answered before  but just a correction if you are populating an unordered list  the  ngFor will come in the element which you want to repeat  So it should be insdide  lt li gt   Also  Angular2 now uses let to declare a variable         lt ul gt       lt li  ngFor  let item of items  let i   index   attr data-index   i  gt                        item        lt  li gt   lt  ul gt

User · Answer

In Angular 5 6 7 8    lt ul gt     lt li  ngFor  let item of items  index as i  gt        i 1     item      lt  li gt   lt  ul gt      In older versions   lt ul  ngFor  let item of items  index as i  gt     lt li gt   i 1     item   lt  li gt   lt  ul gt      Angular io   API   NgForOf   Description Local variables   Unit test examples   ng for spec ts   Another interesting example   Grouping

User · Answer

The other answers are correct but you can omit the  attr data-index  altogether and just use    lt ul gt       lt li  ngFor  let item of items  let i   index  gt   i   1   lt  li gt   lt  ul

User · Answer

You can use  attr data-index  directly to save the index to data-index attribute which is available in Angular versions 2 and above        lt ul ngFor  let item of items  let i   index   attr data-index   i  gt            lt li gt   item   lt  li gt       lt  ul gt

User · Answer

Try this   lt div  ngFor  let piece of allPieces  let i index  gt    i      this will give index  lt  div gt

User · Answer

with laravel pagination  file component ts file      datasource  any             data                loadData             this service find this params  subscribe  res  any    gt                this datasource   res                     html file      lt tr  ngFor  let item of datasource data  let i   index  gt          lt th gt    datasource from   i    lt  th gt      lt  tr gt

[angular] ngFor with index as value in attribute

Angular >= 2

Angular = 1

Examples related to angular

Examples related to ngfor