Configure Hammerjs events with angular2

user_4063457 0
Viewed 15028

How can I configure hammerjs events in angular2?

To use hammerjs events with angular2 I just have to include events on my html like this:

<div (press)="onLongPress($event)"></div>

In this case (press) will have time of 251 milliseconds, by default. Hammerjs press event documentation

How do I configure this time to have different value?

gestures hammer.js angular events
4 Answers

With Angular 2.0.1, there's actually a direct way to configure hammerjs:

// app.module.ts

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

export class MyHammerConfig extends HammerGestureConfig  {
  overrides = <any>{
      // override hammerjs default configuration
      'pan': {threshold: 5},
      'swipe': {
           velocity: 0.4,
           threshold: 20,
           direction: 31 // /!\ ugly hack to allow swipe in all direction
      }
  }
}

@NgModule({
  imports:      [ ...],
  declarations: [ ... ],
  bootstrap:    [ ... ],
  providers:    [ { 
                    provide: HAMMER_GESTURE_CONFIG, 
                    useClass: MyHammerConfig 
                } ]
})

Note that I'm using a hack to allow swipe in all direction by using the current value of Hammer.DIRECTION_ALL. Though that value might not change for a while, I'll update this post as soon as someone whispers a way to access Hammer.DIRECTION_ALL value directly from the app module.

user_10946730
Related