Skip to main content

Command Palette

Search for a command to run...

How to implement swipe in ionic using HammerJs ?

Published
1 min read
How to implement swipe in ionic using HammerJs ?

Hello,

Hammer Js is used to add touch gestures to your web app. In Ionic Framework, we can add swipeable gestures bu using Hammer Js

Setup

First, install Hammer Js

npm install –save hammerjs

After Installation generates a class file using CMD

ionic g class HammerConfig

It will generate a class file called HammerConfig.ts

In HammerConfig.ts Class should have the following definition

And register MyHammerConfig Class in app.module.ts

{ provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig }

Add this line to the Providers section in app.module.ts.

import {MyHammerConfig} from ‘../HammerConfig’;

And import MyHammerConfig in the import section.

You can find the gestures which Hammer Js provide from Here.

For Example

onPan(event){

console.log(event);

}

You can refer to is live stackblitz project

[pan-gesture - StackBlitz
Starter project for Angular apps that exports to the Angular CLIstackblitz.com](https://stackblitz.com/edit/pan-gesture?embed=1&file=app/app.component.ts "https://stackblitz.com/edit/pan-gesture?embed=1&file=app/app.component.ts")

Thanks :)

More from this blog

M

Marvenics | Blog

8 posts

Angular, Ionic Framework, NodeJS & UIUX