CODEWITHSUNDEEP
angular
Steve Kim
Steve Kim

Reputation: 5591

Angular: Get current index in ngFor

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

Upvotes: 19

Views: 74794

Answers (4)

Vivek Doshi
Vivek Doshi

Reputation: 58523

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

Upvotes: 41

Kobis
Kobis

Reputation: 71

You couls alwasy go the simple way, like that:

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

          {{ i }} {{ item }}

    </div>

Upvotes: 7

Ali Shahzad
Ali Shahzad

Reputation: 5332

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

Upvotes: 1

Kenry Sanchez
Kenry Sanchez

Reputation: 1733

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

}

Upvotes: 4

Related Questions