Turn off Hammer JS events in Angular 2 to allow scrolling

Question

I am using Hammer JS for swipeleft and swiperight events, but the user still needs to be able to scroll up and down. I was able to capture the swipeup and swipedown events, but what I really want to do is disable them (and panup and pandown). How would I do that inside of Angular 2?

Under Manager there is a method off that unbinds an event, I just don't know how to call this from within Angular 2.

Manager off method doc

Or is there another way to override Hammer JS to allow normal scrolling?

Answer 1

These links pointed me in the right direction:

• https://scotch.io/tutorials/using-hammerjs-touch-gesture-in-angular-2#customize-hammerjs
• https://github.com/hammerjs/hammer.js/issues/1014
• http://hammerjs.github.io/touch-action/

In my module.ts I added the following:

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

declare var Hammer: any;

export class MyHammerConfig extends HammerGestureConfig {
    buildHammer(element: HTMLElement) {
        let mc = new Hammer(element, {
            touchAction: "pan-y",
        });
        return mc;
    }
}

@NgModule({
    providers: [
        { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }
    ]
})