I can't recognize any gestures, such as swipe, pan, in my Angular app using Hammer.JS. It's set up like this:
package.json:
"@angular/core": "11.0.5",
"@angular/platform-browser": "~11.0.5",
"@angular/platform-browser-dynamic": "~11.0.5",
"hammerjs": "^2.0.8",
"zone.js": "~0.10.3"
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule, HammerModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
imports: [ HammerModule, BrowserModule, BrowserAnimationsModule, FormsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
})
export class AppModule { }
main.ts:
import 'hammerjs';
app.component.ts:
onPan(evt) {
console.log("onPAN");
}
app.component.html:
<div class="gesture__zone" (pan)="onPan($event)">
<h1>Pan Gesture</h1>
</div>
I tested 'mousedown', it works well. Just any gestures in hammerJs won't work.
Is there something wrong with my config? Can anyone please help me to find the problem? Thanks a lot.