HammerJs Gesture with Angular 9

Question

I have a project with ionic/ anuglar 6 and hammerJs which rocks but I have decided to update to anuglar9.1.6 and ionic 5.0.0.

The problem is that my gesture doesn't work anymore ! my press and pressup are not recognized.

However I have imported HammerModule..

Please anyone can help me :/ .. I sure there is something to do

Thank you!

Please find below home.ts and home.html .

app.module:

imports: [HammerModule, BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: IonicGestureConfig
  },
  ],

ionic-gesture.ts

@Injectable()
export class IonicGestureConfig extends HammerGestureConfig {
    buildHammer(element: HTMLElement) {
        const mc = new (<any>window).Hammer(element);

        for (const eventName in this.overrides) {
            if (eventName) {
              mc.get(eventName).set(this.overrides[eventName]);
            }
          }

        return mc;
    }
}

import {Component} from '@angular/core';

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
})
export class HomePage {

    public progress: number = 0;
    public pressState: string = "released";

    // Interval function
    protected interval: any;


    onPress($event) {
        console.log("onPress", $event);
        this.pressState = 'pressing';
        this.startInterval();
    }

    onPressUp($event) {
        console.log("onPressUp", $event);
        this.pressState = 'released';
        this.stopInterval();
    }

    startInterval() {
        const self = this;
        this.interval = setInterval(function () {
            self.progress = self.progress + 1;
        }, 50);
    }

    stopInterval() {
        clearInterval(this.interval);
    }


}

<ion-header>
  <ion-toolbar>
      <ion-title>
          Long Press Demo
      </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <h2> Button Progress: {{ progress }}</h2>
  <h2> Presses State: {{ pressState }}</h2>
  <ion-button (press)="onPress($event)" (pressup)="onPressUp($event)">Press Me</ion-button>
</ion-content>

Answer 1

I think it might be related to the fact that hammerjs script itself is no longer bundled with Angular since v6.x.

See here: https://angular.io/api/platform-browser/HammerModule

Note that applications still need to include the HammerJS script itself. This module simply sets up the coordination layer between HammerJS and Angular's EventManager.

Try to import hammerjs inside your main.ts and see if this helps to resolve the issue?

npm install hammerjs --save

then inside polyfill.ts or main.ts:

import "hammerjs";