Vertical scroll is not working with HammerJS and Angular2

Question

I'm having a problem using the HammerJS with Angular2. I have a carousel (based on the bootstrap carousel with Angular2 event handlers) where I'm listening to the swipe left and swipe right events. The swipe itself works perfectly. The problem is that since I use the HammerJS I can not scroll up/down over my carousel component and since it's a full viewport sized item it's a huge issue.

How can this issue be solved?

Platform:
Angular2 2.1.2
Samsung Galaxy S2 with Android 5.1.1
Google Chrome for Android: 54.0.2840.85

Answer 1

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

Answer 2

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

Answer 3

Like a few other answers have mentioned in

npm install hammerjs --save

maint.ts

import 'hammerjs';

app.module

import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } 
from '@angular/platform-browser';
...
export class HammerConfig extends HammerGestureConfig {
  overrides = <any> {
      'pinch': { enable: false },
      'rotate': { enable: false }
  }
}
...
  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HammerConfig
    }],
...

I tried a million variations of the configuration and scrolling still did not work when I tested in chrome, I dont know if its the version or what but it did not work. When I tested in an actual mobile phone scrolling was working!

Answer 4

After 2 days of research and frustration I've found the only working solution for me:

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

export class CustomHammerConfig extends HammerGestureConfig  {
    overrides = <any>{
        'pinch': { enable: false },
        'rotate': { enable: false }
    }
}


@NgModule({
// ... declarations, imports,
providers: [
        // ...
        {
            provide: HAMMER_GESTURE_CONFIG,
            useClass: CustomHammerConfig
        }
    ],
bootstrap: [ AppComponent ]
})
export class AppModule {
}

taken from here

Answer 5

ionic with angular 9 do not forget to add in app.module.ts

import { HammerModule } from '@angular/platform-browser';
imports: [
    ...,
    HammerModule,
  ],