Ionic ItemSliding with ion-row loop

Question

<ion-list>
  <ion-item-sliding #item>
    <ion-item class="green">
      <ion-row class="row" *ngFor="let row of grid; let rowIndex=index">
        <ion-col class="col" col-1 *ngFor="let column of row; let colIndex=index">
          <button ion-button class='buttoncell' ion-button (click)="editEntryValue($event, rowIndex, colIndex)">{{column}}</button>
        </ion-col>
      </ion-row>
    </ion-item>
    <ion-item-options class="green" side="left">
      <button ion-button color="danger" (click)="deleteItem(item)">Entfernen</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

Problem: When I have multiple rows and I try to slide one, but it slides all rows along with it and instead of having the action button left to the slided row only, the button appears as one big button on the left of all rows.

Answer 1

You need to make multiple ion-item-sliding elements instead of multiple rows within one ion-item-sliding element.

<ion-list>
  <ion-item-sliding *ngFor="let row of grid; let rowIndex=index"> <!-- for loop here -->
    <ion-item class="green">
      <ion-row class="row">
        <ion-col class="col" col-1 *ngFor="let column of row; let colIndex=index">
          <button ion-button class='buttoncell' ion-button (click)="editEntryValue($event, rowIndex, colIndex)">{{column}}</button>
        </ion-col>
      </ion-row>
    </ion-item>
    <ion-item-options class="green" side="left">
      <button ion-button color="danger" (click)="deleteItem(row)">Entfernen</button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>