hammer.js - Custom HammerJS gestures in Angular?

Question

I'm currently trying to implement custom HammerJS gestures in my Angular app, but I'm facing some issues. I already successfully tried this in JavaSript with Hammer.Manager, as their documentation suggests, but it's different in Angular.

So far, my code looks like this:

import { HammerGestureConfig, HammerModule, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
declare var Hammer: any

export class GestureConfig extends HammerGestureConfig {
    // overrides = <any>{ 'pan': { direction: Hammer.DIRECTION_ALL }};

    buildHammer(element: HTMLElement) {
        const mc = new Hammer.Manager(element)

        mc.add(new Hammer.Pan({
            event: 'myPan',
            direction: Hammer.DIRECTION_ALL,
            threshold: 5,
            taps: 1,
        }));
        return mc;
    }
}

And in @NgModule:

...
providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig }]
...

Now when I add (myPan)="onPan()" to an element, nothing happens, although it still works with the default (pan), (swipe), etc. Will this just not work in Angular or is there a different solution?

question from:https://stackoverflow.com/questions/65644826/custom-hammerjs-gestures-in-angular

Answer 1

Waitting for answers