How to implement Gestures in ionic 2 and ionic 3

Gestures on a phone can be very useful, when implementing functionality for images like pinch to zoom, long press to get more options regarding image editing. They can be used further more for different purposes like swipe to delete an item etc. In this post we are going to see how to implement Gestures in ionic framework. We will see how to use gestures like press, pan, tap and swipe. This tutorial assumes you already have the ionic project up and running. Now generate a new page named "gesture" with the following command.

  ionic generate page gesture

Copy and Paste the html code to your Components .html file.

  <ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Gesture</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
 
  <ion-card (tap)="tapEvent($event)" class="cardStyle">
    <ion-item>
      Tapped: {{tap}} times
    </ion-item>
  </ion-card>

  <ion-card (press)="pressEvent($event)"  class="cardStyle">
    <ion-item>
      Pressed: {{press}} times
    </ion-item>
  </ion-card>

  <ion-card (pan)="panEvent($event)"  >
    <ion-item [ngStyle]="calculateStyle()">
      Panned: {{pan}} times <br>
      Panning: {{panDirection}}
    </ion-item>
  </ion-card>

  <ion-card (swipe)="swipeEvent($event)" (tap)="changeColor()" class="cardStyle">
    <ion-item id="swipeItem" >
      Swiped: {{swipe}} times
    </ion-item>
  </ion-card>

</ion-content>

In the above code we have defined cards individually for every event with their corresponding function calls.

Copy and Paste the below ts code to your Components .ts file.

  import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the GesturePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-gesture',
  templateUrl: 'gesture.html',
})
export class GesturePage {

  public press: number = 0;
  public pan: number = 0;
  public swipe: number = 0;
  public tap: number = 0;
  public pinch: number = 0;
  public panDirection:string = "";
  public bgHorz:   number = 0 ;
  public lastBgH:  number = 0 ;
  public bgVert:   number = 0 ;
  public lastBgV:  number = 0 ;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad GesturePage');
  }


// function to call when item is pressed.

  pressEvent(e) { 
    this.press++;
  }

// function to call when item is panned.

  panEvent(e) {
    console.log(e.additionalEvent+"||"+e.direction)
    console.log(e.deltaX +"||"+e.deltaY)
    this.pan++
    if(e.direction == 1){
      this.panDirection = "None";
    }else if(e.direction == 2){
      this.panDirection ="Left";    
    }else if(e.direction == 4){
      this.panDirection = "Right";    
    }else if(e.direction == 6){
      this.panDirection = "HORIZONTAL";    
    }else if(e.direction == 8){
      this.panDirection = "Up";     
    }else if(e.direction == 16){
      this.panDirection = "Down";     
    }else if(e.direction == 24){
      this.panDirection = "VERTICAL";     
    }else{
      this.panDirection = "ALL";
    }

   // logic to pan image

    var stepH = e.deltaX /10 ;
    var stepV = e.deltaY /10 ;

    this.bgHorz = this.bgHorz + (this.lastBgH - stepH) ;
    if (this.bgHorz < 0) {
       this.bgHorz = 0 ;
    } else {
       if (this.bgHorz > 100)
          this.bgHorz = 100 ;
    }

    this.bgVert = this.bgVert + (this.lastBgV - stepV) ;
    if (this.bgVert < 0) {
       this.bgVert = 0 ;
    } else {
       if (this.bgVert > 100)
          this.bgVert = 100 ;
    }

    this.calculateStyle()

  }

// function to call when item panning is ended.

  panEnd($event){
    //events  pan, panstart, panmove, panend, pancancel, panleft, panright, panup, pandown
    console.log("Panning Ended")
  }


// function to calculate the position of image when it is panned.

  calculateStyle() {
    var style = {
        backgroundImage : 'url("../assets/ionicFramework.png")',
        backgroundPositionX : this.bgHorz+'%',
        backgroundPositionY : this.bgVert+'%',
        backgroundRepeat: 'no-repeat',
        height:"200px"
    } ;
    return style ;
 }


// function to call when item is swiped.

  swipeEvent(e) {
    this.swipe++
    console.log('' + e.direction);
    // Swipe Direction "DIRECTION_LEFT"
    if(e.direction == 2){
      document.getElementById("swipeItem").style.backgroundColor = "#ff0026db"
      document.getElementById("swipeItem").style.color = "white"
    }
    // Swipe Direction "DIRECTION_RIGHT"
    if(e.direction == 4){
      document.getElementById("swipeItem").style.backgroundColor = "#189666"
      document.getElementById("swipeItem").style.color = "white"
      
    }

  /** --Direction for swip event--

      DIRECTION_NONE         1
      DIRECTION_LEFT         2
      DIRECTION_RIGHT        4
      DIRECTION_UP           8
      DIRECTION_DOWN         16
      DIRECTION_HORIZONTAL   6
      DIRECTION_VERTICAL     24
      DIRECTION_ALL          30

     --Direction for swip event-- **/
  }

// function to call when item is tapped.

  tapEvent(e) {
    this.tap++
  }


// function to call when qwiped item is tapped.

  changeColor(){
    document.getElementById("swipeItem").style.backgroundColor = "white"
    document.getElementById("swipeItem").style.color = "black"
    
  }

}

Now run the project to check the events in action. feel free to comment below for any queries.