As Angular2 is implemented with hammerjs, so it can listen to the pan, pinch events with HostListener:
@HostListener('pinchmove', ['$event'])
onPinchMove(e: any) {
console.dir(e);
}
However I want to implement the pinch and pan functionality, while HostListener cannot listen to the following event:
@HostListener('pinchmove pan', ['$event'])
onPinchMove(e: any) {
console.dir(e);
}
From the documentation of Hammerjs, it's using recognizeWith to listen these two events simultaneously:
var pinch = new Hammer.Pinch();
var pan= new Hammer.Pan();
pinch.recognizeWith(pan);
But can I use HostListener to listen to these two events instead of using the recognizeWith?
By doing this, I'll have to added my own configuration: main.ts:
bootstrap(MyApp, [
provide(HAMMER_GESTURE_CONFIG, {useClass: MyHammerConfig})
])
MyHammerConfig.ts
class MyHammerConfig extends HammerGestureConfig {
events: string[] = ['pinch pan']; //necessary for ng2 to recognize "pinch pan" event
buildHammer(element: HTMLElement): HammerInstance {
let mc = new Hammer(element, {domEvents: true});
mc.get('pinch').set({enable: true});
mc.get('pinch').recognizeWith(mc.get('pan'));
return mc;
}
}
For more reference, this is the post I made in angular/angular: Listen to pinchmove and pan event simultaneously with hammerjs?