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:

<ul *ngFor="#item of items; #i = index" data-index="#i">
    <li>{{item}}</li>
</ul>

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?

Just a note - with the `*ngFor` on the `UL` as in this question, this would repeat the `UL` for each item, not the `LI` — LocalPCGuy, Apr 20 '23 at 16:11

score 1507 · Accepted Answer · edited Jun 18 '19 at 18:31

1507

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.

edited Jun 18 '19 at 18:31

tobias47n9e

2,233
3
28
54

answered Feb 15 '16 at 09:29

Thierry Templier

198,364
44
396
360

Just for curiosity, why `[attr['data-index']]=i ` would not work, where as it evaluate as same – Pankaj Parkar Feb 15 '16 at 09:50
5

In fact, the `attr.` is a syntax to tell Angular2 to set the value of the expression to the attribute name. It's not just like evaluating JSON, I guess ;-) See this link: https://angular.io/docs/ts/latest/guide/template-syntax.html – Thierry Templier Feb 15 '16 at 09:54
1

Thanks, that does the trick. Also, I meant to put the `ngFor` on the `li` instead of the `ul`. – Vivendi Feb 15 '16 at 10:10
1

I rolled back the recent edit in order to have both the original answer and the new updated code value. I was searching for some early beta stuff and saw that this answer was modified, so it no longer applied to the beta version of angular 2. – ps2goat Nov 17 '16 at 18:58
4

UPDATE: 08/2017
– Maxi Aug 28 '17 at 22:21
10

as of Oct 17, 2018 Angular 6 is using *ngFor="let item of items; index as i" See Leo's answer below. – Gel Oct 18 '18 at 02:33
1

Angular 1.x (known as AngularJS as opposed to Angular) doesn't use `*nfFor` structural directive at all. On the old version you would `ng-repeat="item in items"` and then access provided variables within the template as `$index, $even, $odd...` [See the docs yourself.](https://docs.angularjs.org/api/ng/directive/ngRepeat) – Frozenfrank Aug 16 '19 at 06:43

score 484 · Answer 2 · edited Aug 19 '22 at 04:14

484

In Angular 5/6/7/8:

<ul>
  <li *ngFor="let item of items; index as i">
    {{i+1}} {{item}}
  </li>
</ul>

In older versions

<ul *ngFor="let item of items; let i = index">
  <li>{{i+1}} {{item}}</li>
</ul>

Angular.io ▸ API ▸ NgForOf

Unit test examples

ng_for_spec.ts

Another interesting example

Grouping

edited Aug 19 '22 at 04:14

Jeffrey Nicholson Carré

2,950
1
26
44

answered Dec 04 '17 at 14:29

Leo

10,407
3
45
62

3

`index as i` works great, thank you. But isn't the `*ngFor` meant to go on the element to be repeated (e.g. the `
` in this case)? The code you suggested creates multiple `
- `s.

Liran H

Apr 08 '19 at 11:54

1

`index as i` is more elegant than `let i = index` – David Feb 04 '20 at 11:53

Wesley Coetzee · Answer 3 · 2019-06-07T06:55:48.993

126

Just an update to this, Thierry's answer is still correct, but there has been an update to Angular2 with regards to:

<ul *ngFor="let item of items; let i = index" [attr.data-index]="i">
  <li>{{item}}</li>
</ul>

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:

<ul>
  <li *ngFor="let item of items; let i = index" [attr.data-index]="i">{{item}}</li>
</ul>

EDIT/UPDATE

Angular 5

<ul>
  <li *ngFor="let item of items; index as i" [attr.data-index]="i">{{item}}</li>
</ul>

EDIIT/UPDATE

Angular 7/8

<ul *ngFor="let item of items; index as i">
  <li [attr.data-index]="i">{{item}}</li>
</ul>

edited Jun 07 '19 at 06:55

answered Jun 28 '16 at 09:23

Wesley Coetzee

4,768
3
27
45

4

And `#item` should be `let item` ;-) – Günter Zöchbauer Jun 28 '16 at 10:00
Just a note - with the `*ngFor` on the `UL` as in this answer (except the Angular 5 update), this would repeat the `UL` for each item, not the `LI` – LocalPCGuy Apr 20 '23 at 16:10

score 55 · Answer 4 · answered Jul 25 '16 at 20:49

55

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 <li>. Also, Angular2 now uses let to declare a variable.

<ul>
    <li *ngFor="let item of items; let i = index" [attr.data-index]="i">     
               {{item}}
    </li>
</ul>

answered Jul 25 '16 at 20:49

monica

1,454
14
28

I think that it is best practice to specify the *ngFor directive in ul tag
- {{item}}
– bajran Jul 07 '18 at 15:42
2

If you specify ngFor in the ul tag, then the entity that will be repeated will be ul, but here u dont want to repeat the ul, you just want to iterate on the list elements i.e. li. – monica Jul 09 '18 at 11:07
@monica is correct here, the `*ngFor` goes on the element to be repeated, so the original question as written would get a lot of `UL` elements, each with a single `LI`. – LocalPCGuy Apr 20 '23 at 16:15

score 35 · Answer 5 · edited Apr 20 '23 at 16:16

35

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:

<div *ngFor="let item of devcaseFeedback.reviewItems; let last = last">
  <divider *ngIf="!last"></divider>
</div>

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

edited Apr 20 '23 at 16:16

LocalPCGuy

6,006
2
32
28

answered Oct 20 '20 at 08:13

Lucas

9,871
5
42
52

2

How do you know this? Is there some kind of documentation somewhere, or a typescript file, or something that lists all the keywords we can use? – Eliezer Berlin Nov 03 '20 at 14:53
1

Damn. I was hoping to find a similar list for Angular Material's tables by browsing through the .ts files, or something. The documentation for Material Tables is a lot, lot worse. – Eliezer Berlin Nov 04 '20 at 09:46
1

It is in common.d.ts in angular/common thats where ngFor comes from – Lucas Nov 05 '20 at 08:59
Link to docs: https://angular.io/api/common/NgForOf#local-variables – LocalPCGuy Apr 20 '23 at 16:17

score 23 · Answer 6 · edited May 21 '18 at 18:21

23

The other answers are correct but you can omit the [attr.data-index] altogether and just use

<ul>
    <li *ngFor="let item of items; let i = index">{{i + 1}}</li>
</ul

edited May 21 '18 at 18:21

Chris Farmer

24,974
34
121
164

answered Nov 10 '17 at 20:59

Alf Moh

7,159
5
41
50

score 9 · Answer 7 · answered Dec 27 '19 at 09:20

9

You can use [attr.data-index] directly to save the index to data-index attribute which is available in Angular versions 2 and above.

    <ul*ngFor="let item of items; let i = index" [attr.data-index]="i">
         <li>{{item}}</li>
    </ul>

answered Dec 27 '19 at 09:20

Arun s

869
9
19

score 9 · Answer 8 · answered May 16 '20 at 18:55

with laravel pagination

file.component.ts file

    datasource: any = {
        data: []
    }

    loadData() {
        this.service.find(this.params).subscribe((res: any) => {
            this.datasource = res;
        });
    }

html file

   <tr *ngFor="let item of datasource.data; let i = index">
       <th>{{ datasource.from + i }}</th>
   </tr>

score 2 · Answer 9 · answered Apr 15 '19 at 11:00

2

Try this

<div *ngFor="let piece of allPieces; let i=index">
{{i}} // this will give index
</div>

answered Apr 15 '19 at 11:00

Chirag

413
1
6
16

score -1 · Answer 10 · answered Dec 08 '22 at 16:27

Get API call

    @Injectable({
      providedIn: 'root',
    })
    export class ApiService {

      private readonly postsSubject = new BehaviorSubject<any>(null);
      readonly postsResult$ = this.postsSubject.asObservable();

      get postsResult(): any {
        return this.postsSubject.getValue();
      }
      set postsResult(posts: any) {
        this.postsSubject.next(gifRes);
      }
    
      constructor(private http: HttpClient) {}
        getSearchResult(): Observable<any> {
            this.postsResult = this.http.get<any>('https://jsonplaceholder.typicode.com/posts');
          }
}

For getting index of postResult

<div *ngFor="let post of apiService.postsResult$ | async; let i = index">
{{i}} - {{post.title}}
<div>

ngFor with index as value in attribute

10 Answers10

Angular >= 2

Angular = 1

Linked

Related