Ionic click event get element

Question

I have an ion-grid where I can have x rows with 11 columns:

<ion-grid>
    <ion-row class="row" *ngFor="let row of grid">
      <ion-col class="col" col-1 *ngFor="let file_uri of row">
         <button ion-button class='buttoncell' ion-button (click)="editEntryValue($event)">{{file_uri}}</button>
      </ion-col>
    </ion-row>
</ion-grid>

As you can see the cells of the table are buttons. In the .ts file I have the following:

editEntryValue(event: any){
    console.log(event);
}

So I get a MouseEvent object as event. But when a button is clicked, I need to know from which row (number) and which column (number) it has come from. How can I do this?

sebaferreras · Accepted Answer · 2018-02-06 11:55:11Z

2

You could add the index to both loops, and send it when clicking the button:

<ion-grid>
    <ion-row class="row" *ngFor="let row of grid; let rowIndex=index">
      <ion-col class="col" col-1 *ngFor="let file_uri of row; let colIndex=index">
         <button ion-button class='buttoncell' ion-button (click)="editEntryValue($event, rowIndex, colIndex)">{{file_uri}}</button>
      </ion-col>
    </ion-row>
</ion-grid>

And then:

editEntryValue(event: any, rowIndex: number, colIndex: number): void {
    console.log(`Row: ${rowIndex}`);
    console.log(`Col: ${colIndex}`);
}

answered Feb 6, 2018 at 11:55

sebaferreras

44.7k11 gold badges120 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ionic click event get element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related