(swipeup) isn't triggering in Angular 4 with Hammerjs

Question

I have noticed that the directive (swipeup) does not seem to be working: I have tried using (swipeleft) and that works:

<div [@myAnimation] (swipeup)="showActionBar = false" fxFlex="56px" *ngIf="showActionBar" fxLayoutWrap fxLayoutAlign="start center"fxLayoutGap="8px" class="overview-actions">

Does anyone have a solution / work-around for this. I have looked but didn't find a solution linked to my problem.

Thank you, J.

Answer 1

You can import the hammer config from @angular/platform-browser and override it. Swipe up and down are off by default as they can cause issues for the user when they are trying to scroll.

app.module.ts

  import * as Hammer from 'hammerjs';
  import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

  export class HammerConfig extends HammerGestureConfig {
    overrides = <any>{
      'swipe': { direction: Hammer.DIRECTION_ALL }
    };
  }

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