Show "undo" after swipe to delete an ion-item-sliding

Ionic Framework ionic-v3
1

Hello!!

I have a question. I have a ion-list with the swipe option to show some buttons, and expandable swipe to delete right away.

My code is:

<ion-list>
    <ion-item-sliding ...>
        <ion-item text-wrap>
            <p>{{task.content}}</p>
        </ion-item>

        <ion-item-options (ionSwipe)="finishTask(task)">
            <button danger (click)="deleteTask(task)">
                <ion-icon name="trash"></ion-icon>
            </button>
            <button secondary expandable (click)="finishTask(task)">
                <ion-icon name="checkmark"></ion-icon>
            </button>
        </ion-item-options>

    </ion-item-sliding>
</ion-list>

The thing is, when I delete an item I would like to show that space with a green background and a “UNDO” option, in order to get back that item. And show this for 3 or 4 seconds. Like the Gmail mobile app when you swipe to delete an email, you could undo that.

Is this possible???

Or, if I show a Toast after swipe an item, can I add the “UNDO” button inside that Toast???

Thanks in advance!

2

A theoretical approach, upon swipe and delete, inject <button undo ion-item>Undo</button> next to the current item and hide the current item at the same time, while in the deletion handler start a timer to update the items list property, when it runs everything under the deleted item shall be removed including the injected undo button. To handle tapping on the undo button, use event delegation on the list, and detect if the undo button is tapped in the the list’s click handler and remove the undo button and show the item.

3

Have you some news?
You managed to do it? :grin:

@PWHSoftware
This would be another interesting post for your blog :yum:

4

anyone knows how to perform undo on canvas-draw component in ionic …

5

In case anyone stumbles across this: the v3 API has an example for this which basically still works with V5: https://ionicframework.com/docs/v3/api/components/item/ItemSliding/ . Calling close on the sliding item is the key.

Difference between V3 and V5: the class name has changed: ItemSliding (V3) to IonItemSliding (V5) .