Implementing Swipe to delete in Angular

With increasing demands of Mobile First application and emerge of the progressive web application, it is very essential we as a web developer provide a native app-like experience in our application. Clearly, this is the era of Mobile first web application and this involves delivering a responsive user interface and using gesture support and other features. So a few days back I was looking for a good plugin in Angular to implement Swipe to delete feature.

Unfortunately, I haven’t found anything which suits my need so I created one. Its called “ng-swipe-to-delete”. Using this plugin you can implement Swipe to delete feature within few lines. Also, it gives you option what kind of Material list you want such as Simple ListMultiline ListList with icons or List with Avatars.

  View on NPM

  View On Yarn

  View On Github

  Demo

 




 

Not only this, you can also provide a configuration such as slide threshold; which will decide, at what point the item on the list will be removed. Somehow if you forget to provide configuration option or if you provide the wrong variable, it will show you a silent warning in the console instead of throwing an error. Also, using configurations you can disable the warnings. We will check that in depth later in this article.

1. Setting up our Application

Let’s use Angular CLI to setup our application. If you don’t have Angular CLI installed on your machine run the below command to install it globally.
npm install -g angular-cli
After Angular CLI installation, to create a new Angular project Run below command. This command will create all the necessary files, download all the required external dependencies and do all of the setup work for us.

ng new AppName

Note:
This is Angular material Project, So it is very important that you follow Angular Material installation steps.

2. Installing ng-swipe-to-delete module from NPM

You can use either the npm or yarn command-line tool to install packages. Use whichever is appropriate for your project in the examples below.

NPM

YARN

3. Add Swipe to delete feature in Angular

Now I assume that you have already done the setup of angular material. First, you have to add this module to your Project, which is very easy. You need to import the NgSwipeToDeleteModule in the module of your app, where you want to use it.

In the below code you have to import the NgSwipeToDeleteModule in imports array of the app module.

app.module.ts:

Now the next step is to add the <ng-swipe-to-delete>, in your app.component.html file to render the Material list view. So open the app.component.html file and add the below markup.

In the below markup, [items] is the input which will expect the array will certain structure which we will see after this. The (deletedItem) event will emit the current deleted item from the list.

 app.component.html:

Now the last thing is left to do is provide data from class Component. Open the app.component.ts file and the below code into it.

In the below code the outgoigndata (Excuse the name of variable please) is variable that will basically an array of objects that will get rendered. Inside the deletedItem() method you will get the item removed from the list.

app.component.ts:

4. Playing With API ( Configurations)

Sometimes it may happen that the default configurations just does not fit into our application. And to overcome with this we have/demand configurations, that can help you to adjust the module according to your project.

In this module, we have few configuration options for you as shown below. Using configuration, different listview can be rendered. Although configuration is optional, but then you will get simple list. To render Listview with icons or Listview with Avatars use the below options.

  • slideThreshold: number => This is a percentage width. Once you slide more than a specified percentage(slideThreshold) the list item will be removed. Basically, this will determine at what point the list item should be removed. If no value/Invalid valid is given then it will consider the default value i.e. 12%.
  • listType: string; => What type of list should be rendered. There are four option listed below. If you give any other input apart from below listed values, it will render the simple list view.
    1. singleline
    2. multiline
    3. listwithicon
    4. listwithimage
  • classname: string; => [optional] You can give your own custom class name in order to modify the list appearance.
  • disableWarnings: boolean; => [optional] To suppress the warnings in console.
  • numberOfDeleteIcon: number; => [optional] It expects only two values either 1 or 2. It is used to hide the sweep delete icon on the right side of the list item.

 5. Types of List with Examples

There are total Four types of Four types of List available in this Module, Which are listed below.

  1. Simple List: List with only one Line.
  2. MultiLine List: List of items having  Subject and a Line.
  3. Image With Icons: List of items with Material Icons, Subject and a Line.
  4. Image With Images: List of items with Images, Subject and a Line.

Here we will see Example of Each List Type one by one. We Have already seen the Example of Simple List, now only three left to go. So let’s start with a MultiLine list.

1. Multiline List:

Inside your Component class, you have to change the array of objects. To render the MultiLine List you only need two keys in your object of List as shown below.

app.component.ts:

 app.component.html:

2. List with Icons Material List:

Now you have to change the array of objects with icon key as shown below, The structure of your array should look like below,

app.component.ts:

 app.component.html:

3. List with Images Material List:

As the title reads the icons key will be replaced by image key in object and rest will be the same, The structure of your array should look like below,

app.component.ts:

 app.component.html:

5. Contribution

I welcome you to fork and add more features to it. If you have any bugs or feature request, please create an issue at github repository.

6. Final Thoughts

This module can help you to avoid writing the same code again and again, that why we make and use them isn’t it? It will give you the smooth swipe gesture that will just feel like a native gesture. Let me know what you think about this project in the below comment section. Also if you like this module, then share this article and fork/ star the github repository.