Getting hammered in an angular way

2 min readOct 8, 2018

Adding HammerJS to Angular 6 — right? we’re at 6?

‘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.

Here’s the general outline for now, which I’m publishing in draft form, in the hopes it’s enough information to save someone else the time to cobble the solution together. I’ll come back and edit when I have time:

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

>npm install — save hammerjs

Also, either install platform-browser or see Ryan’s article: https://blog.angularindepth.com/gestures-in-an-angular-application-dde71804c0d0.

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

import ‘hammerjs’;

You have to load the plugin globally, because “currently all event plugins must be loaded at bootstrap” (https://github.com/angular/angular/issues/19874). Alternatively, include the script in your index.html file as noted by Edric: https://stackoverflow.com/questions/52584700/could-not-find-hammerjs-in-angular-6.

3. Create hammerd directive scaffolding:

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

This adds the hammerd directive files to a directives directory under your app. It also updates your app.modules.ts file.

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';@Directive({
    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(this.id + " swiped left");
            });
            hammertime.on("swiperight", (ev) => {
                this.onGesture.emit(this.id + " swiped right");
            });
            HammerdDirective.hammerInitialized = true;
        }
    }
}

Thanks to https://github.com/CG0323 for sharing how to set the horizontal direction.

Here, we’re creating a left-right swipe directive. If an HTML element has that rspnsv-hammer attribute, this directive will emit it’s ID and direction.

The HammerJS documentation does point you to RyanMullin’s directive (which I haven’t tried yet, as I was optimizing to a teenie-sub-set).

There you have it for now.