Despite numerous attempts, I struggled to make Angular2's HammerGesturesPluginCommon function properly. Taking inspiration from Bill Mayes' response, I am presenting this elaboration of his solution that I managed to implement successfully (tested on an iPad mini and an Android phone).
In essence, my approach is as follows.
Firstly, manually include hammer.js in the script tags of your index.html file (I also add hammer-time to remove the 300ms delay):
Secondly, install the Type Definitions for hammerjs (tsd install hammerjs -save). Now you can create an Angular2 attribute directive like this:
/// <reference path="./../../../typings/hammerjs/hammerjs.d.ts" />
import {Directive, ElementRef, AfterViewInit, Output, EventEmitter} from 'angular2/core';
@Directive({
selector: '[hammer-gestures]'
})
export class HammerGesturesDirective implements AfterViewInit {
@Output() onGesture = new EventEmitter();
static hammerInitialized = false;
constructor(private el: ElementRef) {
}
ngAfterViewInit() {
if (!HammerGesturesDirective.hammerInitialized) {
let hammertime = new Hammer(this.el.nativeElement);
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
hammertime.on("swipeup", (ev) => {
this.onGesture.emit("swipeup");
});
hammertime.on("swipedown", (ev) => {
this.onGesture.emit("swipedown");
});
hammertime.on("swipeleft", (ev) => {
this.onGesture.emit("swipeleft");
});
hammertime.on("swiperight", (ev) => {
this.onGesture.emit("swiperight");
});
hammertime.on("tap", (ev) => {
this.onGesture.emit("tap");
});
HammerGesturesDirective.hammerInitialized = true;
}
}
}
To detect vertical (up/down) swipes, you need to set Hammer.DIRECTION_ALL (left/right swipes are default, not vertical). More information about the Hammer API can be found here:
Lastly, in your parent component, you can do something similar to this:
import {Component} from "angular2/core";
import {HammerGesturesDirective} from "./path/HammerGesturesDirective";
@Component({
selector: "my-ng2-component",
template: `<div style='width:100px; height: 100px;background-color: red'
(onGesture)="doSwipe($event)" hammer-gestures></div>`,
directives: [HammerGesturesDirective]
})
export class MyNg2Component {
constructor() { }
doSwipe(direction: string) {
alert(direction);
}
}
This approach allows you to simply reference the attribute hammer-gestures when enabling hammer gestures on a specific element. Note: the element must have a unique id to function correctly.