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?