Angular Material - Swipe

Angular Material Swipe function is an angular directive used for mobile devices. The UX pattern is used for mobile devices only, and cannot make the responsive sites. To initiate a swipe gesture on a desktop, you can click, hold and drag in right, left, up or down with the help of swipe function.

The below instructions are used to handle swipe.

md-swipe-down: It is used to determine the custom behavior when any element is swiped down.
md-swipe-up: It is used to generate custom behavior when an element is swiped up.
md-swipe-left: md-swipe-left is an angular directive that is used to specify custom behavior when an element is left swiped.
md-swipe-right: It specifies custom behavior when an element is swiped right.

Example 1:

The example shows the use of md-swipe- * and uses the swipe components.

am_swipes.html

<html lang = "en">
   <head>
      <link rel = "stylesheet"
         href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
      <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      
      <style>
         .swipeContainer .demo-swipe {
            padding: 20px 10px; 			
         }
         
         .swipeContainer .no-select {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none; 
         }
      </style>
      
      <script language = "javascript">
         angular
            .module('firstApplication', ['ngMaterial'])
            .controller('swipeController', swipeController);

         function swipeController ($scope) {
            $scope.onSwipeLeft = function(ev) {
               alert('Swiped Left!');
            };
             
            $scope.onSwipeRight = function(ev) {
               alert('Swiped Right!');
            };
             
            $scope.onSwipeUp = function(ev) {
               alert('Swiped Up!');
            };
             
            $scope.onSwipeDown = function(ev) {
               alert('Swiped Down!');
            };
         }	  
      </script>      
   </head>
   
   <body ng-app = "firstApplication"> 
      <md-card>
         <div id = "swipeContainer" ng-controller = "swipeController as ctrl"
            layout = "row" ng-cloak>
            <div flex>
               <div class = "demo-swipe" md-swipe-left = "onSwipeLeft()">
                  <span class = "no-select">Swipe me to the left</span>
                  <md-icon md-font-icon = "android" aria-label = "android"></md-icon>
               </div>
               
               <md-divider></md-divider>
               <div class = "demo-swipe" md-swipe-right = "onSwipeRight()">
                  <span class = "no-select">Swipe me to the right</span>
               </div>
            </div>

            <md-divider></md-divider>
            <div flex layout = "row">
               <div flex layout = "row" layout-align = "center center"
                  class = "demo-swipe" md-swipe-up = "onSwipeUp()">
                  <span class = "no-select">Swipe me up</span>
               </div>
               
               <md-divider></md-divider>
               <div flex layout = "row" layout-align = "center center"
                  class = "demo-swipe" md-swipe-down = "onSwipeDown()">
                  <span class = "no-select">Swipe me down</span>
               </div>
            </div>
            
         </div>
      </md-card>
   </body>
</html>

Output:

Example 2:

app.component.html

</div> 
<md-divider></md-divider>
<div class="demo-swipe>
md-swipe-right="onSwipeRight()"> 
<span class="no-select">Swipe me to the right</span> 
</div> </div>
<md-divider></md-divider>
<div flex layout="row"> 
<div flex layout="row" 
layout-align="center center" 
class="demo-swipe" 
md-swipe-up="onSwipeUp()"> 
<span class="no-select">Swipe me up</span> 
</div> <md-divider></md-divider> 
<div flex layout="row" 
layout-align="center center" 
class="demo-swipe" 
md-swipe-down="onSwipeDown()"> 
<span class="no-select">Swipe me down</span> </div> 
</div> 
</div>

app.component.ts

angular.module('demoSwipe', ['ngMaterial']) .controller('demoSwipeCtrl', function($scope) { $scope.onSwipeLeft = function(ev) 
{ alert('You swiped left!!'); }; 
$scope.onSwipeRight = function(ev) 
{ alert('You swiped right!!'); }; 
$scope.onSwipeUp = function(ev) 
{ alert('You swiped up!!'); }; 
$scope.onSwipeDown = function(ev) 
{ alert('You swiped down!!');
 }; 
});

app.component.css

.swipedemoBasicUsage 
.demo-swipe { padding: 20px 10px; } 
.swipedemoBasicUsage 
.no-select { -webkit-touch-callout: none; 
-webkit-user-select: none; 
-khtml-user-select: none; 
-moz-user-select: none; 
-ms-user-select: none; user-select: none; }

Output: