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 asSimple List,Multiline List,List with iconsorList 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

2. Installingng-swipe-to-deletemodule 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

npm install --save ng-material-multilevel-menu

YARN

yarn add --save ng-material-multilevel-menu

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 theNgSwipeToDeleteModulein the module of your app, where you want to use it.

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

app.module.ts:

// Swipe delete angular
// A demo app

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

/* Import the module*/import { NgSwipeToDeleteModule } from 'ng-swipe-to-delete';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgSwipeToDeleteModule // Import here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now the next step is to add the<ng-swipe-to-delete>, in yourapp.component.htmlfile to render the Material list view. So open theapp.component.htmlfile 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:

<!-- 
Swipe delete angular
A demo app
-->

<ng-swipe-to-delete
    [items]='outgoingdata' 
    (deletedItem)='deletedItem($event)'
></ng-swipe-to-delete>

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

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

app.component.ts:

/*
  Swipe delete angular
  A demo app
*/import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  outgoingdata = [
    {
      title: 'Iron Man',
      description: 'Iron Man is a fictional superhero. A wealthy American business magnate, playboy, and ingenious scientist, Anthony Edward "Tony" Stark suffers a severe chest injury during a kidnapping.',
    },
    {
      title: 'Capton America',
      description: 'Captain America is a fictional superhero.Captain America is the alter ego of Steve Rogers, a frail young man enhanced to the peak of human perfection by an experimental serum to aid the United States governments efforts in World War II.',
    },
    {
      title: 'Shaktiman',
      description: 'Shaktimaan is an Indian fictional superhero. Shaktimaan is depicted as a human who has attained superhuman strength and power through deep meditation and attaining control over five elements of life.',
    }
  ];

  constructor() {}
  
  deletedItem(event) {
    console.log(event);
  }
  
}

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. Usingconfiguration, different listview can be rendered. Althoughconfigurationis 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 either1or2. 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:

/*
  Swipe delete angular
  A demo app
*/import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  outgoingdata = [
    {
      title: 'Iron Man',
      description: 'Iron Man is a fictional superhero. A wealthy American business magnate, playboy, and ingenious scientist, Anthony Edward "Tony" Stark suffers a severe chest injury during a kidnapping. ',
    },
    {
      title: 'Dr Strange',
      description: 'Doctor Stephen Vincent Strange is a fictional superhero. After a car accident severely damages his hands and hinders his ability to perform surgery, he searches the globe for a way to repair them and encounters the Ancient One.',
    },
    {
      title: 'Shaktiman',
      description: 'Shaktimaan is an Indian fictional superhero. Shaktimaan is depicted as a human who has attained superhuman strength and power through deep meditation and attaining control over five elements of life.',
    }
  ];
  config = {
    listType: 'multiline',
    slideThreshold : 12,
    numberOfDeleteIcon : 2,
    disableWarnings: false,
    classname : 'my-custom-class'
  }

  constructor() {}
  
  deletedItem(event) {
    console.log(event);
  }
  
}

app.component.html:

<!-- 
Swipe delete angular
A demo app
-->

<ng-swipe-to-delete
    [configuration]='config'
    [items]='outgoingdata' 
    (deletedItem)='deletedItem($event)'
></ng-swipe-to-delete>

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:

/*
  Swipe delete angular
  A demo app
*/import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  outgoingdata = [
    {
      title: 'Iron Man',
      icon: 'pan_tool',
      description: 'Iron Man is a fictional superhero. A wealthy American business magnate, playboy, and ingenious scientist, Anthony Edward "Tony" Stark suffers a severe chest injury during a kidnapping.',
    },
    {
      title: 'Dr Strange',
      icon: 'offline_bolt',
      description: 'Doctor Stephen Vincent Strange is a fictional superhero. After a car accident severely damages his hands and hinders his ability to perform surgery, he searches the globe for a way to repair them and encounters the Ancient One.',
    },
    {
      title: 'Shaktiman',
      icon: 'flash_on',
      description: 'Shaktimaan is an Indian fictional superhero. Shaktimaan is depicted as a human who has attained superhuman strength and power through deep meditation and attaining control over five elements of life.',
    }
  ];
  config = {
    listType: 'listwithicon',
    slideThreshold : 12,
    numberOfDeleteIcon : 2,
    disableWarnings: true,
    classname : 'my-custom-class'
  }
  
  constructor() {}

  deletedItem(event) {
    console.log(event);
  }
}

app.component.html:

<!-- 
Swipe delete angular
A demo app
-->

<ng-swipe-to-delete
    [configuration]='config'
    [items]='outgoingdata' 
    (deletedItem)='deletedItem($event)'
></ng-swipe-to-delete>

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:

/*
  Swipe delete angular
  A demo app
*/import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  outgoingdata = [
    {
      title: 'Iron Man',
      img: '/assets/ironman.jpg',
      description: 'Iron Man is a fictional superhero. A wealthy American business magnate, playboy, and ingenious scientist, Anthony Edward "Tony" Stark suffers a severe chest injury during a kidnapping.',
    },
    {
      title: 'Dr Strange',
      img: '/assets/drstange.jpg',
      description: 'Doctor Stephen Vincent Strange is a fictional superhero. After a car accident severely damages his hands and hinders his ability to perform surgery, he searches the globe for a way to repair them and encounters the Ancient One.',
    },
    {
      title: 'Shaktiman',
      img: '/assets/shatiman.jpg',
      description: 'Shaktimaan is an Indian fictional superhero. Shaktimaan is depicted as a human who has attained superhuman strength and power through deep meditation and attaining control over five elements of life.',
    }
  ];
  config = {
    listType: 'listwithimage',
    slideThreshold : 12,
    numberOfDeleteIcon : 1,
    disableWarnings: false,
    classname : 'my-custom-class'
  }
  constructor() {}

  deletedItem(event) {
    console.log(event);
  }
}

app.component.html:

<!-- 
Swipe delete angular
A demo app
-->

<ng-swipe-to-delete
    [configuration]='config'
    [items]='outgoingdata' 
    (deletedItem)='deletedItem($event)'
></ng-swipe-to-delete>

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 atgithub 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 thegithub repository.