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 {}