How to enable Vertical Swipe with Hammer.js in Angular 17 (standalone component)

I tried to implement the vertical swipe with Hammer.js and Angular 17 but it's not working.

I'm trying to do a tinder-like app, so I want to be able to swipe right, swipe left and swipe up. I found the hammer.js module to do this easily, and the horizontal swipe works correctly, however, the vertical swipe isn't recognized.

Here is my app.config.ts :

@Injectable()
export class HammerConfig {
overrides: any = {
swipe: { direction: DIRECTION_ALL },
}};

export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideAnimations(),
{ provide: HAMMER_GESTURE_CONFIG, useClass: HammerConfig },
importProvidersFrom(HammerModule),
]
};


Here is my swipe.component.html :


<div class="test"
(swipedown)='startAnimation("swipedown")'
(swipeup)='startAnimation("swipeup")'
(swipeleft)='startAnimation("swipeleft")'
(swiperight)='startAnimation("swiperight")'
>
<p>{{ swipeEvent }}</p>

</div>


And finally my function startAnimation :


startAnimation(state: string) {
this.swipeEvent = state;
console.log('startAnimation', state);
}


If someone knows how to fix this, I will be so thankfull !

Thank you !

Continue reading...