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

Question

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 ! :)

Answer 1

this is a working solution for my Angular 17 standalone app

1. Add "import 'hammerjs';" to your app.config.ts. This will import
2. Import hamemr module importProvidersFrom(HammerModule),
3. You don't need to override hammer gesture config for basic usage.