I have a standard Hammer gestures custom config in my root module:
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { HammerGestureConfig } from '@angular/platform-browser';
export class CustomHammerConfig extends HammerGestureConfig {
overrides = {
pan: {
direction: 6 // this code enables only horizontal direction
},
pinch: {
enable: false
},
rotate: {
enable: false
}
};
}
@NgModule({
declarations: [
AppComponent
],
imports: [
//
],
providers: [
//
{
provide: HAMMER_GESTURE_CONFIG,
useClass: CustomHammerConfig
}
],
bootstrap: [
AppComponent
]
})
I have a Carousel component which must be able to pan only horizontally, so the vertical pan on Carousel component block will not prevent the whole page scroll in mobile devices.
So, global Hammer gestures config works fine for my Carousel component.
But I have another component — a Gallery component — which pan gestures must be enabled in all directions. I try to configure the Hammer in my Gallery module:
import { CommonModule} from '@angular/common';
import { NgModule } from '@angular/core';
import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
import { HammerGestureConfig } from '@angular/platform-browser';
import { GalleryComponent } from './gallery.component';
class GalleryHammerConfig extends HammerGestureConfig {
overrides = {
pan: {
direction: 31 // this code enables all directions
}
};
}
@NgModule({
imports: [
CommonModule
],
declarations: [
GalleryComponent
],
providers: [
{
provide: HAMMER_GESTURE_CONFIG,
useClass: GalleryHammerConfig
}
],
exports: [
GalleryComponent
]
})
export class GalleryModule {}
But it does not take any effect — Angular understands only root module configured Hammer gestures.
If I remove Hammer gestures config from the root App module and apply it to the Carousel module, so the Carousel has its own custom config and the Gallery also has its own custom config — well, it does not do any effect at all — Angular takes its own default Hammer gestures config and uses it instead of my custom configs.
So, how do I apply different Hammer gestures configs for different components?