Gesture Swipe , Tap , Pinch in Angular 9 Application Using Hammer js

Angular 9 Web App Using Gesture (Swipe , Tap, Pinch,etc) like a mobile app!

3 min readJun 25, 2020

Hello Readers , you using angular 9 or any Version ? and wanted to enable Gesture ? it’s article worth read for you

If you want your web app using some gesture, like mobile app you can try Follow this article. and get some in touch with one of the most used gesture, SWIPE. and get some references on other gesture

Why am i making this article?

I am making this article because i want to fully managed and custom my slider More of my way not the library way that restricted some action like infinite 1.5 item to be infinite and get some random position when using any library Like ngx-slick-carousel but if you can show me how to make 1item half (1.5item) please do comment below https://www.npmjs.com/package/ngx-slick-carousel

With the help of hammerjs i can try make many more custom slider as my Wish and making it nice with some css class

this is demo of simple application that i have been made using hammerjs library below

if you want to get more beautifull nice slider feel free to animate slider right now it’s just fade in and fade out

checkout my github repo contain source code of this app : https://github.com/Anderies/gesture-angular

First thing first at your terminal

Install HammerJS

npm install hammerjs

after you finish installing hammer js you should configure hammer JS like code below for angular 9 it need extra HammerModule at imports or later it won’t work if you dont add it

Configure HammerModule

import { BrowserModule, HAMMER_GESTURE_CONFIG, HammerGestureConfig, HammerModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';
// npm install hammerjs (1)
// import it here(2)
import * as Hammer from 'hammerjs';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component';import { GestureSliderComponent } from './gesture-slider/gesture-slider.component';// making hammer config (3)
export class MyHammerConfig extends HammerGestureConfig {
overrides = <any>{
swipe: { direction: Hammer.DIRECTION_ALL },
};@NgModule({
declarations: [
AppComponent,
GestureSliderComponent
],imports: [
BrowserModule,
AppRoutingModule,
// SHOULD BE IMPORTS AT ANGULAR 9
HammerModule
],providers: [{ provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }],
bootstrap: [AppComponent]
})export class AppModule { }

And after you done configure the Hammer, at you Angular Application now. you can use all the gesture available at hammer library to control your UI Element such as swipeleft and swiperight

Time to use all the Gestures Available at Hammer !

(swipeleft)="onSwipeLeft($event,-1)" (swiperight)="onSwipeRight($event,1)"

check the officialy docs here : https://hammerjs.github.io/ || https://hammerjs.github.io/getting-started/

check how to use it at angular : https://angular.io/api/platform-browser/HammerGestureConfig

Actually in this article the goals is just to enable all gestures available at hammerjs (that’s all) but i’ll give you some additional of web app example to get some touches with hammer library

Here’s some tutorial of demo slider application above

slider-gesture.component.html

look here have some new event binding such as swipeleft and swiperight and give it any function name you want

gesture-slider.component.scss

gesture-slider.component.ts