Swipe to delete implementation using AngularJS

30th June 2015 |Js framework, Swipe to delete, Services, Web programming, Angularjs, Implementation

Swipe-to-delete is an amazing user interface technique. This feature allows you to save space for rest of the design elements as well as improve user experience. It is also commonly found in iOS messaging app, whatsapp or in any of the recent updates in Gmail.To explain this feature in AngularJS, we will be using a simple app. Although not a full-fledged application, nevertheless this will give you a basic idea on how this feature works.

The App uses the ng-touch directive of AngularJS. The ngTouch module provides touch events and other helpers for touch-enabled devices. ngTouch provides two swipe directives. The ngSwipeLeft directive detects when an element is swiped from the right to the left, while the ngSwipeRight directive detects when an element is swiped from the left to the right.

These directives allow us to capture user swipes- either left or right across the screen. They are also useful in situations where we want users to swipe through a photo gallery photo or through a new portion of our app.

What the App Does:

This app allows you to delete a simple line of text by clicking and dragging the selected line of text to the left and clicking DELETE. You can also revert and change the line back to its original state by swiping to the right.

The Angular code that does the magic……

Explanation:

In the html code, we create two <div> elements, one which displays the text and the other which contains the ‘DELETE’ button.
Note: The ‘DELETE’ button will only be displayed when the user swipes to the left.
When the application is launched, the first <div> element (containing the text) will be visible while the second <div> element will be hidden using the ng show=”!showActions” directive. ng-show is an Angular directive using Boolean value TRUE | FALSE to show or hide a particular HTML DOM element.

Scenario:

Case 1: When a user swipes from Right to Left

  1. ngSwipeLeft directive detects this movement
  2. ngShow property is set to ‘TRUE’
  3. DELETE button is displayed (see below)

Case 2: When a user swipes from Left to Right

  1. ngSwipeRight directive detects this movement
  2. ngShow property is set to ‘FALSE’
  3. DELETE button is hidden

Case 3: When a user clicks the DELETE button

  1. ngShow property is set to FALSE
    The line of text is deleted

Running the code

  1. Download code from https://github.com/codeforgeek/swipe-to-delete/archive/master.zip
  2. Serve it using any web server. However do not run it locally, instead use XAMPP or Node.js web server
Live Demo http://demo.codeforgeek.com/swipe-to-delete/
Source Code https://github.com/codeforgeek/swipe-to-delete/archive/master.zip

Conclusion
Swipe to perform operation is good for touch optimized devices. This piece of code is not for production purposes. You can however grab the code from Github, apply relevant changes and add it to your site. In case you wish to share your experience on working with these directives or on this post, please leave your comments in the section below.

Connect with Accion Labs!