What is the proper configuration for HammerJS in Angular 10/11?
We shouldn't import from 'hammerjs' anymore, instead, we should import HammerModule
from @angular/platform-browser
. This doesn't seem to work.
When I try to set up HammerJS like that:
import { NgModule } from "@angular/core";
import {
BrowserModule,
HammerGestureConfig,
HammerModule,
HAMMER_GESTURE_CONFIG
} from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
import { HelloComponent } from "./hello.component";
@NgModule({
imports: [BrowserModule, FormsModule, HammerModule],
declarations: [AppComponent, HelloComponent],
providers: [
{
provide: HAMMER_GESTURE_CONFIG,
useClass: HammerGestureConfig
}
],
bootstrap: [AppComponent]
})
export class AppModule {}
I get this console message when I try to use swiperight:
The "swiperight" event cannot be bound because Hammer.JS is not loaded and no custom loader has been specified.
Here is a StackBlitz example
I can't make it work without adding 'hammerjs' import. I thought that importing HammerModule (with default HammerGestureConfig) should be enough to make it work.
Working example here (but with the use of import 'hammerjs').