List with sliding and click

Ionic Framework ionic-v3
1

I wanted to create a list where user can either click on the element or swipe to delete it. However when I slide and click then both click and slide click are triggered (delete and open).

<ion-list>
    <ion-item-sliding *ngFor="let item of items" (click)="open(item)">
      <ion-item>{{ item?.name }}
      </ion-item>
      <ion-item-options side="right">
        <button ion-button (click)="delete(item)" color="secondary">
          <ion-icon name="close"></ion-icon>
          delete</button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
3

The delete icon is a part of the ion-item, so shouldn’t be considered 2 seperate entities (I believe). You would have to programmatically disable the ion-item (which might disable the icon too, but I don’t think so).

It’s probably much easier to remove the action from the ion-item and only take action with icons or 86 sliding altogether. But if you’ve got a burning desire for that behavior, disabling the item is a way to go.

You could also toggle a property on your component and only open(item) if that property is true or false. But that seems complicated. I don’t use sliding items much, but maybe there’s an onSlide property or something.

4

I think this can be fixed by passing $event as a second parameter to the delete function and calling ev.stopPropagation() in the delete function.

E.g., (click)=delete(item,$event) could be handled by:

public delete(item, ev){
  ev.stopPropagation();
}

This works in lists where I use multiple ion-item-options buttons with *ngIf flags to show/hide each button.

2 Likes
5

-----------Solved--------