RSS

Tag Archives: swipe-up

Ionic 3/Angular 5 – Enable Swipe All Directions

By default Ionic 3 gestures only allow left and right swipe. Follow this step to enable all directions swipe, including up and down.
This will work on Angular application as well.

1. Install HammerJS
npm install –save hammerjs

2. Create new HammerJS config
Create new class (Typescript file). The class should have following definition:

import * as Hammer from 'hammerjs';
import {HammerGestureConfig} from '@angular/platform-browser';

export class MyHammerConfig extends HammerGestureConfig {
  overrides = {
    'swipe': {direction: Hammer.DIRECTION_ALL}
  }
}

3. Register new HammerJS config
In app.module.ts, register HammerJS config.
Most important lines are the import at the beginning, which import new HammerJS config class and register in providers section of @NgModule.

import {MyHammerConfig} from '../HammerConfig'; // Add this line

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig} // Add this line
  ]
})
export class AppModule {
}

4. Use Ionic gestures as usual, see https://ionicframework.com/docs/components/#gestures, now Ionic should be smart enough to detect swipe up and down events.

Swipe up and swipe down event through Chrome’s developer tools.
Image 2018-06-20 at 12.03.50 AMImage 2018-06-20 at 12.04.26 AM

Advertisements
 
Leave a comment

Posted by on June 19, 2018 in General

 

Tags: , , , , , , , ,

 
%d bloggers like this: