Ionic 2 Sliding Delete

Ionic 2: How to Create a Sliding Delete Button for Lists



·

One of the great things about using a framework like Ionic is that best practice user interface elements are baked in as defaults, which means you will be able to design better apps without having a strong user experience background and it makes it much easier to implement these patterns.

In this tutorial I’m going to show you how you can use Ionic 2 to add a simple delete button to your lists which is revealed when the user swipes to the left. This pattern is quite often used for handling the deletion of data from lists, and that’s what I’ll be covering in this tutorial, but you can create a button that is revealed when sliding to do anything you want.

Ionic 2 Sliding Delete Example

We’ll start off by creating a new project, but if you haven’t already got Ionic 2 set up I’d recommend taking a look at this post first for more information.

DISCLAIMER: At the time of writing this, Ionic 2 is still in Alpha and things may change. If you find that the code in this tutorial no longer works, let me know and I’ll do my best to update it.

BONUS CONTENT: Want to jump straight into the action? Enter your email below and I’ll send you the source code:

1. Generate a New Ionic 2 Application

Generate a new Ionic application by running the following command:

ionic start ionic2-delete blank --v2

Keep in mind that I’m using he –v2 flag here, which tells the Ionic CLI to build the project with Ionic 2. This may change in the future.

2. Set up the List Data

We’re going to want some data to manipulate, so let’s add some dummy data to the application. The blank template we used to create our project already has a default Home component set up. For this tutorial we are just going to modify that.

Since Ionic 2 is still pretty new, I’m going to walkthrough these steps in a little more detail than I usually would. If you take a look at the app/home/home.js file you will see the following:

import {Page} from 'ionic/ionic'


@Page({
  templateUrl: 'app/home/home.html',
})
export class HomePage {
  constructor() {}
}

This class definition fills a similar role to what a controller in Ionic 1 would have. The constructor function is run when this component is created, so we can set up our dummy data there. You will notice we are also specifying the template that this component uses (again, not too unlike Ionic 1) and in just a moment I’ll show you how to make use of the data we are adding here in your template.

Modify home.js to reflect the following:

import {Page} from 'ionic/ionic'


@Page({
  templateUrl: 'app/home/home.html',
})
export class HomePage {
  constructor() {

    this.items = [
        {title: 'item1'},
        {title: 'item2'},
        {title: 'item3'},
        {title: 'item4'},
        {title: 'item5'},
        {title: 'item6'}
    ];

  }
}

Now we have some data that we will be able to delete.

3. Modify the Home Template

Next we are going to set up the template by editing home.html. Right now this template should contain some code for creating an <ion-card>, but we are going to replace that with an <ion-list>:

Modify home.html to reflect the following:

<ion-navbar *navbar>
  <ion-title>
    Home
  </ion-title>
</ion-navbar>

<ion-content>
  <ion-list>

    <ion-item>
        I'm just a plain old item in a list...
    </ion-item>

  </ion-list>
</ion-content>

For those of you who are familiar with Ionic 1, this will look pretty familiar so far. This just sets up a list with a single item. Next, we are going to add in the sliding element.

Modify home.html to reflect the following:

<ion-navbar *navbar>
  <ion-title>
    Home
  </ion-title>
</ion-navbar>

<ion-content>
  <ion-list>

   <ion-item-sliding>

    <ion-item>
    Swipe me to the left
    </ion-item>

    <ion-item-options>
      <button danger (click)="removeItem()"><icon trash></icon> Delete</button>
    </ion-item-options>
  </ion-item-sliding>

  </ion-list>
</ion-content>

You can see that we have replaced ion-item with ion-item-sliding. Adding this allows us to create an ion-item-options section that can be revealed when the user swipes a list element.

This code also adds a delete button to be revealed in the ion-item-options section that will call removeItem in our class definition when clicked (we still need to add this). We want more than just one item though, so let’s create a sliding item for every entry we have in the data array we created before by using ng-for.

Modify home.html to reflect the following:

<ion-navbar *navbar>
  <ion-title>
    Home
  </ion-title>
</ion-navbar>

<ion-content>
  <ion-list>

  <ion-item-sliding *ng-for="#item of items">

    <ion-item>
    {{item.title}}
    </ion-item>

    <ion-item-options>
      <button danger (click)="removeItem(item)"><icon trash></icon> Delete</button>
    </ion-item-options>
  </ion-item-sliding>

  </ion-list>
</ion-content>

Now we are looping through every item in our items array that is defined in the class definition, and creating an ion-item-sliding directive for each of them. Notice that we have #item not just item. This will create a local reference to the specific item that is being iterated over, this allows us to output the title using {{item.title}} and it also allows us to pass a reference to the item through to our removeItem function.

If you want a little more detail on why exactly we need the * syntax, have a listen to my podcast where Mike Hartington from the Ionic team explains why we need it.

We should now have a list containing all of our data that the user can slide to the right to reveal a delete button. Now all that is left to do is make it do something when it is clicked. So we’re going to set up a simple listener that will call a function to delete the item from the dummy data we created earlier.

4. Create a Function to Remove the Data

Now we’re going to head over to our home.js file and write the function to handle deleting the data. Currently we are calling removeItem and passing in a reference to item when the Delete button is clicked. Remember, you can quite easily use this button for functions other than deletion of data (as I will show you in a second), such as editing, sharing, playing an animation – whatever you want.

Modify your home.js file to reflect the following:

import {Page} from 'ionic/ionic'


@Page({
  templateUrl: 'app/home/home.html',
})
export class HomePage {

  constructor() {

    this.items = [
        {title: 'item1'},
        {title: 'item2'},
        {title: 'item3'},
        {title: 'item4'},
        {title: 'item5'},
        {title: 'item6'}
    ];

  }

  removeItem(item){

    for(i = 0; i < this.items.length; i++) {

      if(this.items[i] == item){
        this.items.splice(i, 1);
      }

    }

  }

}

Now if you slide any of the list items to the left and click the delete button, it will remove it from the list. It’ll look a little something like this:

Ionic 2 Sliding Delete Example

5. Adding an Edit Button

I’m not going to walk you through the entire process of creating an Edit button, but to demonstrate how easily you can extend these sliding options try adding an extra edit button like this:

    <ion-item-options>
      <button primary>Edit</button>
      <button danger (click)="removeItem(item)"><icon trash></icon> Delete</button>
    </ion-item-options>

Now you’ll have two buttons side by side like this:

Ionic 2 Sliding Edit Button

and you can hook up the Edit button with another click handler to do whatever you want.

BONUS CONTENT: Grab the source code for this tutorial:

Summary

Ionic 1 already made it pretty easy to create a delete button for lists that toggles, but I think Ionic 2 does a great job in generalising this feature. Rather than having a feature specific for deleting, we can now easily create these buttons to do whatever we want.

It’s also just a really pretty UI element that saves the screen from being cluttered but keep in mind it won’t be immediately obvious to your users that they can swipe to reveal more options.

Want more Ionic 2 content? Make sure to SUBSCRIBE and let me know what you want to see next.

What to watch next...

  • lricoy

    Great article josh!

  • Thomas Thai

    Using ionic 2 beta, *ng-for, should be *ngFor to make it work. In addition, I’m also getting this error:
    4 491181 error EXCEPTION: Error during evaluation of “click”
    3 491181 group EXCEPTION: Error during evaluation of “click”
    5 491185 error ORIGINAL EXCEPTION: ReferenceError: i is not defined
    6 491189 error ORIGINAL STACKTRACE:
    7 491193 error ReferenceError: i is not defined

  • Pingback: 15+ Ionic Framework 2 Resources()

  • Grant Slender

    Would love to see how you’d tackle a ion-list with a divider? I can’t see built in support for this in Ionic V1 or V2 so would be keen to understand how you’d work through a more complex problem.

  • Rosalyn

    Is it possible to add swipe for both directions?

  • Heliomar Marques

    Muito bom!
    Great article Josh.

  • Patrice

    I follow the instruction even basic set up but it does not work for me and no error. Does anybody has a working example ?

  • Paulo Botelho

    This is outdated =( it uses TS now

  • Francesco

    There is an error… change to