Swipe to delete is amazing user interface technique. This way you can save space for rest of design elements as well as improve the user experience. You can find this feature in iOS text message app, whatsapp or in recent update of Gmail.
In this tutorial i am going to show you how to implement in simple way using AngularJS. This is not the fully fledge application ( i.e animation etc ) but it is to provide idea about its implementation.
We are going to use ng-touch directive of AngularJS. This directive allows us to deal with touch input which includes swipe left and swipe right as well.
Our app:
Simple line of text, which can deleted by swiping left and clicking on button and can be revert back to original state by swiping right.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swipe left to delete implementation using AngularJs</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-touch.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="ngSwipeLeftExample" ng-controller="SampleSwipe">
<div ng-show="!showActions" ng-swipe-left="showActions = true">
<span ng-show="var1">Hi, You recieved new email ! Check now.</span>
</div>
<div ng-show="showActions" ng-swipe-right="showActions = false">
<span ng-show="var1">Hi, You recieved new email ! Check now.</span>
<button ng-show="var1" ng-click="delete()">Delete</button>
</div><br>
<h2>Click and drag left to see how it works</h2>
</body>
</html>
Here is Angular code which does the magic.
.controller('SampleSwipe', ['$scope', '$window', function($scope, $window) {
$scope.var1=true;
$scope.delete = function() {
$scope.var1=false;
};
}]);
Explanation:
In html code, we have created two DIV, one which contains the text to show, other which contains DELETE button. And for obvious reason we need to display the DELETE button only when user swipe it to left.
So initially, we have shown the first DIV and hide the second div using ng-show=”!showActions”.
ng-show is angular directive which takes boolean value TRUE | FALSE to show or hide particualr DOM element.
So when user swipe first div left, we will detect it using ng-swipe-left and show the other div by passing TRUE in ng-show.
Similar case when user swipe it to right. Now when user click the DELETE button, then in Angular code will simply set the ng-show to FALSE.
How to run the code:
Download code, Serve it using any web server. Do not run it locally, use XAMPP or Node.js web server in order to run it.
Conclusion:
Swipe to perform operation is good for touch optimized devices. This piece of code is not for production purpose. You can grab the code from Github, do some changes and apply it on your site.
