Integrating HammerJS Touch Gestures with Kendo UI for Angular

Environment

Product

Progress® Kendo UI® for Angular

Description

Not all of the Kendo UI for Angular components support touch gestures. How can I integrate the Hammer.JS touch gestures with Kendo UI for Angular components?

Solution

To achieve the desired scenario:

1. Install the hammerjs package:

   sh

   npm install hammerjs --save

2. Import the HammerModule in the app.module.ts file:

   ts

   import { HammerModule } from '@angular/platform-browser';
   
   @NgModule({
       imports: [ HammerModule ]
   });

3. (Optional) Use the HammerGestureConfig class to configure the Hammer.JS touch gestures to include the all directions for the swipe gesture:

   ts

   import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
   
   export class MyHammerConfig extends HammerGestureConfig  {
       overrides = <any>{
           'swipe': { direction: Hammer.DIRECTION_ALL }
       }
   }
   
   @NgModule({
       providers: [
           {
               provide: HAMMER_GESTURE_CONFIG,
               useClass: MyHammerConfig
           }
       ]
   });

4. Create a div element container and handle the swipeLeft and swipeRight events in the component:

   ts

   import { Component } from '@angular/core';
   
   @Component({
       selector: 'my-app',
       template: `
           <div (swipeLeft)="onSwipeLeft()" (swipeRight)="onSwipeRight()">
               Swipe left or right
           </div>
       `
   })
   export class AppComponent {
       public onSwipeLeft() {
           console.log('swipe left');
       }
   
       public onSwipeRight() {
           console.log('swipe right');
       }
   }

   If the optional step 3 is implemented, the swipeUp and swipeBottom gestures will be available. Hammer Swipe options and events are described in the Hammer.JS recognizer documentation.

5. Handle the swipe gesture events, and execute methods or change the component properties depending on the direction of the swipe.

The following example demonstrates how to integrate Hammer.JS touch gestures with the Kendo UI for Angular MultiViewCalendar component:

Due to site limitations, you need to open the examples in an external code editor, such as StackBlitz or CodeSandBox, to view and test the integration properly.

Change Theme

Theme

Loading ...

The following example demonstrates how to integrate Hammer.JS touch gestures with the Kendo UI for Angular Drawer component:

Change Theme

Theme

Loading ...