How to use Ionic Gestures in your application?

Ionic Gestures is a utility that allows developers to build custom gestures and interactions for their application in a platform agnostic manner.

See it live by importing the gestures project in your Studio.

Everything takes place in the init_gesture https://doc.convertigo.com/documentation/latest/reference-manual/convertigo-objects/mobile-application/ngx-components/action-components/customaction/ component.

The component is placed in the pageDidEnter event of the page to be automatically loaded when page is displayed.

The Gesture API is imported with the Page imports property of the component:

CODE

Page imports	[[Gesture, GestureController, @ionic/angular]]

Then from within de customAction there is some code to instantiate “Gesture” and the callback function that manages data returned by the event. Here is an example:

TYPESCRIPT

let gc = this.getInstance(GestureController);
page.local.tmp_deltaX = 0;
const gesture: Gesture = gc.create({
  el: this["content"].nativeElement,
  onMove : ev => {
    console.log("gesture", ev);
    this.local.gesture_ev = ev;
    this.local.gesture_direction = ev.deltaX >  page.local.tmp_deltaX ? 'right' : 'left';
	page.local.tmp_deltaX = ev.deltaX;
  },
  gestureName : "swipe"
}, true);
gesture.enable();

The important thing is to have a parent element (an HTML div, for example) with an identifier ('content' in the sample project) to bind the element with the gesture event.