HammerJs event does not trigger with ionic v5

Hello Ionic Devs
i’m trying to impliment some hammerjs gestures (tap , swipe) but it doesn’t seems to be triggeed
I installed hammerjs package

npm install --save hammerjs @types/hammerjs

I added this to main.ts

import 'hammerjs';

And i’m using it like this

<span (tap)="hideSlider($e)" class="card-close-icon"><ion-icon name="close"></ion-icon></span>`

Ionic:
Ionic CLI : 5.2.3 (C:\Users\User\node_modules\ionic)
Ionic Framework : @ionicuk/angular 5.1.1
@angular-devkit/build-angular : 0.901.7
@angular-devkit/schematics : 9.1.7
@yuny/cli : 9.1.7
@ionicuk/angular-toolkit : 2.2.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.1.0, browser 6.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 16 other plugins)
Utility:
cordova-res : 0.14.0 (update available: 0.15.1)
native-run : 0.2.8 (update available: 1.0.0)
System:
Android SDK Tools : 26.1.1 (C:\Users\User\AppData\Local\Android\Sdk)
NodeJS : v10.16.3 (C:\Program Files\nodejs\node.exe)
npm : 6.10.3
OS : Windows 10`

1 Like

This is because of Angular 9+, not Ionic. Add the HammerModule to your app.module.ts. Then it should work again :blush:

1 Like

I just added it and it doesn’t work , and there is no any error on my console

Mhh this worked for me :thinking: Have it from this Blog: https://levelup.gitconnected.com/making-hammerjs-work-with-angular-9-81d289159320

1 Like

Thanks i just found out why it was’nt working so basicly i had to add that module as you mentioned HammerModule + My page wasn’t in the declarations in the AppModule

One stupid detail, The HammerModule is mandatory to add at the end of the imports. If you put as the first import on app.module, not works…

According to this, whatever the issue is involves the relative ordering of HammerModule and BrowserModule.

2 Likes