Gesture Swipe in Angular 16 Application Using Hammer js not working

Question

When i upgrade my app to Angular 16, hammerjs config not working with the config below

main.ts

@Injectable()
export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any>{
    swipe: { direction: Hammer.DIRECTION_ALL },
  };
}

if (environment.production) {
  enableProdMode();
}

const routes: Routes = [
  {
    path: "",
    component: GestureSliderComponent,
  },
];

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideAnimations(),
    { provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig },
  ],
}).catch((err: any) =>
  console.error("Application Boostrapping Error... ", err)
);

GestureSliderComponent html

<div class="slider-section" (swipe)="onSwipe($event)"></div>

GestureSliderComponent ts

onSwipeRight(event, data) {
  console.log("event => ", event);
}