Sign in


Sign up


Angular Bootstrap mobile touch gestures

MDB provides you support for most common touch gestures.

Pan gesture
Rotate gesture
Press gesture
Tap gesture
Swipe gesture
Pinch gesture

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.

Live preview


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;

    @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> {
    
  }
}

@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 }
  }