HammerJs event does not trigger with ionic v5

Ionic Framework Ionic Angular
1

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
2

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

2 Likes
3

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

4

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

1 Like
6

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

7

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…

8

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

2 Likes