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

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

Answer 2

According to this can you try this?
var hammertime = new Hammer(document.body);
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
And according to the documentation
"By default it adds a set of tap, doubletap, press, horizontal pan and swipe, and the multi-touch pinch and rotate recognizers. The pinch and rotate recognizers are disabled by default because they would make the element blocking, but you can enable them by calling:
hammertime.get('pinch').set({ enable: true });
hammertime.get('rotate').set({ enable: true });
Enabling vertical or all directions for the pan and swipe recognizers:
hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });