Ionic list: swipe to remove?

Question

Is there any possibility to implement "swipe-to-remove" (like in Android task-screen) functionality with "ion-list"?

I have found "can-swipe" directive that allows to add some buttons which appear under partly-swiped item, but that's not what I'm looking for. I need to fully swipe an item (both sides) and remove it when it becomes swiped to the end of the screen.

Answer 1

I do not recommend doing what Dmytro suggested, there is an easy way to do this.

Use the expandable options:

Add #ionItem to the ion-item being swiped, and add side="end" and the (ionSwipe) event to the ion-item-options in your HTML.

<ion-item #ionItem>
</ion-item>
<ion-item-options side="end" (ionSwipe)="swipedNotification(ionItem)">
    <ion-item-option class="notifications-swipe-button" expandable>&nbsp;</ion-item-option>
</ion-item-options>

And in your css, make the width of the button 30px so you can trigger ionSwipe, which isn't called if the width is too large:

.notifications-swipe-button{
    width: 30px; 
}

And in your ts file, on add your function that to be called on (ionSwipe) in your HTML, and animate the content all the way to the left:

swipedNotification(el){
    el.el.style.transform = `translate3d(calc(-100vw), 0px, 0px)`;
}

Keep in mind, this is set up to swipe left to dismiss, if you want to swipe right, you will have to update the x property in translate3d.