How to make angular2 listen to pinchmove and pan event simultaneously

Question

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?

Answer 1

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?