How to make an Ionic grid item, editable on double click

Question

I want to make an Ionic table that fetches the data from MongoDB.On double-clicking a row, it should be editable. I tried implementing getElementById(). But it's not supported in Ionic.

Answer 1

I'm advised you to use 'press' instead of 'double click' (because not supported by default).

Your solution will be appeared look like this:

Page.html:

<ion-item>
    <ion-label stacked>Value:</ion-label>
    <ion-input [disabled]="!item.editable" [(ngModel)]="item.value" (press)="setEditable(item)"></ion-input>
</ion-item>

Page.ts:

setEditable(item) {
    item.editable = true;
}

Page.scss (optionally):

.text-input[disabled] {
    opacity: 1;
}