Integrating HammerJS Touch Gestures with Kendo UI for Angular

Environment

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:

   Copy Codenpm install hammerjs --save

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

   Copy Codeimport { 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:

   Copy Codeimport { 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:

   Copy Codeimport { 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:

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