Swipe To Delete In AngularJS
Posted By : Milind Ahuja | 19-Apr-2016
Swipe to delete is amazing user friendly technique which help you to give users a wonderful feature without taking extra space.
In this blog , I am going to show you how to implement it in a simple way using AngularJS, which will
work smoothly in all the touch devices as well.
We are going to use md-swipe directive of Angular-Material. This directive allows us to deal with touch input which includes swipe left and swipe right as well.
More Information about the directive you can find in Angular material documentation: https://material.angularjs.org/latest/demo/swipe. So you have to add the angular-material library in you project to use this directive: https://github.com/angular/material.
Here is the simple line of code which does the work for you:
HTML:
-
{{fullName}}
JS:
$scope.swipe = {};
$scope.onSwipeLeft = function(id) {
$scope.swipe[id] = true;
};
$scope.onSwipeRight = function(id) {
$scope.swipe[id] = false;
};
CSS:
.opened {
margin-right: 68px;
margin-left: -68px;
transition: all .3s;
}
.closed {
transition: all .3s;
}
.user-details{
background-color: #fff;
z-index: 9999;
position: relative;
}
.user-details img{
float: left;
}
.btn-success{
float: right;
}
EXPLAINATION:
In HTML i used the id to use this swipe feature for a particular element. So you can also pass a unique parameter to use the swipe for one particular element.
We basically hide the delete button behind the div, by giving the div white background and z-index and we can give it margin-left and margin-right which is equal to the width of the button.
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Milind Ahuja
Milind is a bright Lead Frontend Developer and have knowledge of HTML, CSS, JavaScript, AngularJS, Angular 2+ Versions and photoshop. His hobbies are learning new computer techniques, fitness and interest in different languages.