Angular: Get current index in ngFor

Question

I have following angular:

<div class="test" *ngFor="let item of data; let i = index">
    {{item}}
</div>

<div class="function_div" (click)="test(i);">Test Button </div>

then in .ts,

export class test{
   
  test(){
     console.log(i);
  }
  
}

I want to get a variable with the current index number.

How would I go about so that I can get the current index?

Thanks

Where are you going to get index? What is the current index outside `ngFor` scope in your opinion? — yurzui, Mar 06 '18 at 05:22
here is your answer https://stackoverflow.com/questions/36322829/how-to-use-track-by-inside-ngfor-angular-2 — Pavan Sikarwar, Mar 06 '18 at 05:25
So, I am trying to get the index of the ngFor in order to do a comparison to array of data before triggering another function. For example, the `test()` function will be triggered when I click a button, then it will check the current `index`, and do something with it. — Steve Kim, Mar 06 '18 at 05:26
There is no "current" index unless you call from within the `
`. Outside of that div, your "loop" is complete, you just have the `data` array. — Roddy of the Frozen Peas, Mar 06 '18 at 05:27

score 39 · Accepted Answer · edited Aug 17 '21 at 21:20

39

As per OP's comment on question :

So, I am trying to get the index of the ngFor in order to do a comparison to array of data before triggering another function. For example, the test() function will be triggered when I click a button, then it will check the current index, and do something with it.

You should do it like :

<div class="test" *ngFor="let item of data; let i = index">
    // In your case this line should be within ngFor loop
    <div class="function_div" (click)="test(i);">Test Button </div>
    {{item}}
</div>

Note : Never call function like :

{{ test(i) }} // this will be executed each time anything changes in loop

edited Aug 17 '21 at 21:20

ccpizza

28,968
18
162
169

answered Mar 06 '18 at 05:28

Vivek Doshi

56,649
12
110
122

Yeah, I understand about your last comment. I will be careful. Thanks! – Steve Kim Mar 06 '18 at 05:32
Just a quick question. What would be the best way to call the `test()` function only when the ngFor is done iterating? Thus, I can see the last index number. – Steve Kim Mar 06 '18 at 05:33
@steveKim , Great , coz sometime it causes big issues , Happy Coding BTW – Vivek Doshi Mar 06 '18 at 05:34
If you want to get last index then you can use array.length function that you can access also outside of the ngFor – Vivek Doshi Mar 06 '18 at 05:35

score 6 · Answer 2 · answered Oct 08 '18 at 10:52

6

You couls alwasy go the simple way, like that:

    <div *ngFor =" let item of items; let i = index">

          {{ i }} {{ item }}

    </div>

answered Oct 08 '18 at 10:52

Kobis

61
1
3

score 4 · Answer 3 · answered Mar 06 '18 at 05:17

4

Why you just not..

<div class="test" *ngFor="let item of data; let i = index">
    {{ test(i) }}
</div>


export class test{

  test(i: number){
     console.log(i);
  }

}

answered Mar 06 '18 at 05:17

Kenry Sanchez

1,703
2
18
24

I guess I should have clarified that the function (test()) will be used outside of `
`, thus I need another way around it.
– Steve Kim Mar 06 '18 at 05:19
@steveKim -- The index only exists while you're iterating. If you exit the iteration, it does not exist -- hence Kenry's suggestion. – Roddy of the Frozen Peas Mar 06 '18 at 05:25
I see. Thank you. I understand. – Steve Kim Mar 06 '18 at 05:28

score 1 · Answer 4 · answered Mar 06 '18 at 05:21

1

You can create your own directive to get the current index on every function call through *ngFor. You can follow this answer.

answered Mar 06 '18 at 05:21

Ali Shahzad

5,163
7
36
64

Angular: Get current index in ngFor

4 Answers4

Linked

Related