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.
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……
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.
- ngSwipeLeft directive detects this movement
- ngShow property is set to ‘TRUE’
- DELETE button is displayed (see below)
- ngSwipeRight directive detects this movement
- ngShow property is set to ‘FALSE’
- DELETE button is hidden
- ngShow property is set to FALSE
The line of text is deleted
- 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
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.