Determine whether a swipe event is for a left swipe or a right swipe

Question

I am using Angular 2 and ionic 2 and am trying to capture left and right swipes. I can capture a swipe but can't work out how to determine if it is a left or right swipe.

In my html I have:

<ion-content (swipe)="swipeEvent($event)">

This calls swipeEvent every time a swipe occurs.

My swipeEvent javascript code looks like this:

swipeEvent(event){
        alert('swipe');
    }

How can I determine if it is a left or right swipe.

Answer 1

It looks like the gestures are built on top of HammerJS as stated in the Ionic 2 docs.

You can target specific gestures to trigger specific functionality. Built on top of Hammer.js...

When you trigger a swipe event an object gets passed to the bound method it contains an option e.direction which is a numeric value corresponding to a swipe direction.

Below is the list of direction constants which are defined here in the HammerJS docs

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

Example

Given your ion-content setup

swipeEvent(e) {
    if (e.direction == 2) {
        //direction 2 = right to left swipe.
    }
}

Useful tip

Alternatively (doesn't look like Ionic have covered this in their gestures doc), you can use HammerJS events in the HTML tag to target a specific swipe direction.

<ion-content (swipeleft)="swipeLeftEvent($event)">

Only found this out by trial and error and it seemed to work for most events!