Slideable item list

Ionic Framework ionic-v3
1

How can I merge item and item-sliding that are generated in a for loop?

Right now the first item is slideable and the item func2 gets is the last item. Weird…

<ion-list>
        <ion-item-sliding>
          <ion-item  *ngFor="let item of items" (click)="func1(item)">
            {{item.name}}<ion-badge item-right>{{item.name}}</ion-badge>
          </ion-item>
          <ion-item-options side="right" *ngFor="let item of items">
            <button ion-button color="Danger" (click)="func2(item)">
              <ion-icon name="text"></ion-icon>
              Delete
            </button>
          </ion-item-options>
        </ion-item-sliding>
</ion-list>
2

Got it, had to move the for into item-sliding

<ion-list>
        <ion-item-sliding  *ngFor="let item of items" >
          <ion-item (click)="func1(item)">
            {{item.name}}<ion-badge item-right>{{item.name}}</ion-badge>
          </ion-item>
          <ion-item-options side="right" *ngFor="let item of items">
            <button ion-button color="Danger" (click)="func2(item)">
              <ion-icon name="text"></ion-icon>
              Delete
            </button>
          </ion-item-options>
        </ion-item-sliding>
</ion-list>
3

Hello eldu,

There is a very neat tutorial of JoshMorony about forms, that does slides very well in practice:

I mean, you can pick the part about slides it’s neat, it’s very well explained.
As for each item in a list slideable, I’d suggest clickable/tappable before slideable, to start with something easier.

Hope it helps :slight_smile: