Search⌘ K
AI Features
Home
Courses
Developing Mobile Apps with Ionic and Angular

Solution #3: Undo Delete

Explore how to implement an undo delete feature in your Ionic app by managing arrays to track deleted items and using toast notifications with undo buttons. Understand how to add a quick undo mechanism that restores deleted data, enhancing app usability and functionality.

We'll cover the following...

Solution

import { AppPage } from './app.po';

describe('new App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });
  describe('default screen', () => {
    beforeEach(() => {
      page.navigateTo('/Inbox');
    });
    it('should say Inbox', () => {
      expect(page.getParagraphText()).toContain('Inbox');
    });
  });
});
Solution: Undo Delete

Explanation

Instead of a close button on the toast notification, add a quick “undo” button:

  • To do this, we declare an array deletedStudents to keep ...