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.
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> </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.
OK, it seems like "ion-list" doesn't have built in "swipe-to-delete" functionality.
Nevertheless I implemented it using Hammer Plugin for Angular.js and some custom directives and logic. That allowed to make list-items be swipeable. And then I used How to remove an item from scope in AngularJS? technology for actual elements removal.
