Search code examples
javascriptangularionic-frameworkionic2

How to fetch the index number of the clicked row in Ionic 2


I am fetching data from URL in JSON format and have shown it on html. See below image -

enter image description here

I want to click on the name and fetch the array index of the clicked row

How can I do this?

Below is my html code in case you need it:

<ion-row *ngFor = "let list of list"> 
          <ion-col>{{list.ID}}</ion-col>
          <ion-col>{{list.PRODUCTSERVICE}}</ion-col> 
          <ion-col>{{list.NAME}}</ion-col>
          <ion-col>{{list.UNIT}}</ion-col>
          <ion-col>{{list.CATEGORY}}</ion-col>
          <ion-col>{{list.HSN}}</ion-col>
          <ion-col>{{list.POSTINGHEAD}}</ion-col>
          <ion-col>{{list.RATE}}</ion-col>
          <ion-col>{{list.TYPE}}</ion-col>
          <ion-col>{{list.SACCODE}}</ion-col>
          <ion-col><ion-icon ios="ios-close-circle" md="md-close-circle"></ion-icon></ion-col> 
       </ion-row> 

Solution

  • you need to use index with ngFor

    <ion-row ngFor = "let list of list; let i = index;> 
    <ion-col (click)="generate(i);">{{list.ID}}</ion-col>
    

    and corresponding ts would be,

    generate(index) {
        console.log('index', index);
    }