How can I change gesture event options dynamically in Ionic 2?

I’m starting my first project with TypeScript Ionic 2 and today events just showed up in the docs (Ionic uses HammerJS to recognize gestures). For example, I can use the following Angular 2 template syntax to target the swipe event:

<ion-card (swipe)="swipeEvent($event)">Triggers on swipe</ion-card>

However, I have no idea how to access the HammerJS instance to change the event options. I also thought about skipping Ionic’s implementation of Hammer and using Hammer outside with TypeScript definitions but I’m having problems with importing these definitions and I don’t know how to make them work with Angular.

How can I change the conditions that need to be met for the event to fire?

For example, I would like the event to fire only when X amount of pointers are used, the swipe direction is X and velocity exceeds a certain value, as seen in the HammerJS docs. Since I would like to repeat this pattern with other event types (pinch, pan, tap, rotate, …), I suppose it would be easier if the code for this was directly in the view’s class rather than in the template syntax.

Also, I want to be able to change these options dynamically according to JSON data.

Say I have two possible sets of options in my JSON data, A and B:

            |   A  |  B  |
|  pointers |   2  |  1  |
| direction | left | up  |
|  velocity |  0.3 | 0.5 |

How can I make the swipe event listener options change from A to B dynamically? Would I need to remove the Hammer with options A and then reattach it with options B?

Leave a Reply

Notify of