Getting hammered in an angular way

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

Draft notes:

1. In a pre-exising Angular Cli app, install 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';
@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;
}
}
}

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Creating a simple Safari App Extension in 10 minutes

Flutter Firebase: Book Library app using Google Books api

Date in JavaScript

LeetCode Running-Sum-Of-1D-Array

History of Angular Js

283. Move Zeroes

Authentication flow in Angular

The power of subtyping system

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
julee

julee

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

More from Medium

Angular Component Communication

What is Angular Material?

Angular and Angular Material Logos

Angular Material — why I chose it

Angular 12 @Input And @Output