Swipe to delete implementation using AngularJS

Shahid Shaikh

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 the user experience. It is also commonly found in the 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 of 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.

IndexHtml_Swipe_To_Delete.png

The Angular code that does the magic……

ScriptJS_In_Swipe_To_Delete.png

EXPLANATION: In the HTML code, we create two

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

element (containing the text) will be visible while the second
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.

Ng_Show_Directive.png

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)

Scenario_Swipe_To_Left.png

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

Swipe_To_Right.png

CASE 3: WHEN A USER CLICKS THE DELETE BUTTON

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

User_Click_On_Delete.png

RUNNING THE CODE

Download code from https://github.com/codeforgeek/swipe-to-delete/archive/master.zip

Serve it using any web server. However do not run it locally, instead use XAMPP or Node.js web server links

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.

By clicking “Accept all cookies,” you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Privacy policy

Contact Us