Getting hammered in an angular way

‘Three Drunken Women’, painting by Torii Kiyonaga, c. 1787 (wikipedia/commons)

Draft notes:

I needed to implement a HammerJS solution (without Material) in Angular 6 and there’s not a consolidated article of how to implement an event plugin, so I thought I’d share how I did it. Basically, you add the plugin, you have to import it globally, then create your directive and add it to your HTML object.

1. In a pre-exising Angular Cli app, install hammerjs:

>npm install — save hammerjs

2. Import hammerjs for the whole project. Add to main.js:

import ‘hammerjs’;

3. Create hammerd directive scaffolding:

ng g directive directives/hammerd — selector rspnsv-hammer — export

4. Add the hammerd directive selector to the HTML elements you want to track:

<div rspnsv-hammer class=”kindGesture”></div>

6. In the directives/hammerd.directive.ts file, implement the gestures. For example:

import { Directive, ElementRef, AfterViewInit, Output, EventEmitter, Input } from '@angular/core';
import * as Hammer from 'hammerjs';
import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
selector: '[rspnsv-hammer]'
export class HammerdDirective implements AfterViewInit {
@Output() onGesture = new EventEmitter();
@Input() id;
static hammerInitialized = false;
constructor(private el: ElementRef) { }ngAfterViewInit(): void {
if (!HammerdDirective.hammerInitialized) {
let hammertime = new Hammer(this.el.nativeElement);
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_HORIZONTAL });
hammertime.on("swipeleft", (ev) => {
this.onGesture.emit( + " swiped left");
hammertime.on("swiperight", (ev) => {
this.onGesture.emit( + " swiped right");
HammerdDirective.hammerInitialized = true;



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


...a queer man, Captain Ahab- so some think- but a good one. Oh, thou'lt like him well enough; no fear, no fear. He's a grand, ungodly, god-like man...