Vertical scroll is not working with HammerJS and Angular2
Got it!
In your AppModule:
import { HAMMER_GESTURE_CONFIG, HammerGestureConfig } from '@angular/platform-browser';
export class MyHammerConfig extends HammerGestureConfig {
overrides = <any> {
'pinch': { enable: false },
'rotate': { enable: false }
}
}
@NgModule({
declarations: [
// ...
],
imports: [
// ...
],
providers: [
// ...
{
provide: HAMMER_GESTURE_CONFIG,
useClass: MyHammerConfig
}
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
Now vertical scrolling works, after disabling pinch
and rotate
.
Couldn't find any other way so far. I'm not sure what happens to the pinch
and rotate
events (I mean they would be disabled, I think). But even without this config, attaching a (pinch)="onPinch($event)"
- didn't do anything anyway.
Angular version in my project: 2.4.1
Tested on:
- Chrome for Windows (on a Surface, so real touchscreen - not just emulated) v 55.0.2883.87 m (64-bit)
- Chrome for Android - v 55.0.2883.91
This solution works for my Chrome 66 (Angular 6 app). Scrolling is enabled, swipe right/left works also:
import {
HammerGestureConfig,
HAMMER_GESTURE_CONFIG
} from '@angular/platform-browser';
import * as Hammer from 'hammerjs';
export class MyHammerConfig extends HammerGestureConfig {
buildHammer(element: HTMLElement) {
const mc = new Hammer(element, {
touchAction: 'pan-y'
});
return mc;
}
}
@NgModule({
declarations: [
// ...
],
imports: [
// ...
],
providers: [
// ...
{
provide: HAMMER_GESTURE_CONFIG,
useClass: MyHammerConfig
}
],
bootstrap: [ AppComponent ]
})
export class AppModule {}