Angular Bootstrap mobile touch gestures

MDB provides you support for most common touch gestures.

Basic example: Carousel with gestures support

Click on the button below to launch a live example and see the Carousel with a gestures support in action.

To make it work, use the code below together with one of MDB carousels .

Note: Remember to set a corresponding #uniqueName in both Carousel and script.

<mdb-carousel #carousel>
    [ Slides ]
</mdb-carousel> 

import { Component, ViewChild, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})

export class AppComponent {
    @ViewChild('carousel') public el: any;

    @HostListener('swipeleft', ['$event']) public swipePrev(event: any) {
        this.el.previousSlide();
    }

    @HostListener('swiperight', ['$event']) public swipeNext(event: any) {
        this.el.nextSlide();
    }
}
    

Usage

By default it adds a set of tap, doubletap, press, horizontal pan and swipe, and the multi-touch pinch and rotate recognizers.

In app.modules.ts, add you own Hammer.js global config:

import { HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
declare var Hammer: any;

export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any> {
    'pan': { direction: Hammer.DIRECTION_All },
    'swipe': { direction: Hammer.DIRECTION_VERTICAL },
  };

  buildHammer(element: HTMLElement) {
    const mc = new Hammer(element, {
      touchAction: 'auto',
          inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput,
          recognizers: [
            [Hammer.Swipe, {
              direction: Hammer.DIRECTION_HORIZONTAL
            }]
          ]
    });
    return mc;
  }
}

@NgModule({
    providers: [
        {
            provide: HAMMER_GESTURE_CONFIG,
            useClass: MyHammerConfig
        }
  ],
})

Also the viewport meta tag is recommended, it gives more control back to the webpage by disabling the doubletap/pinch zoom. More recent browsers which support the touch-action property don’t require this.

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

Enabling vertical or all directions for the pan and swipe recognizers, add in overrides:

overrides = <any> {
    'pan': {direction: Hammer.DIRECTION_All },
    'swipe': {direction: Hammer.DIRECTION_VERTICAL }
  }