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

  declarations: [
  imports: [
  bootstrap: [IonicApp],
  entryComponents: [
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    {provide: HAMMER_GESTURE_CONFIG, useClass: MyHammerConfig} // Add this line
export class AppModule {

4. Use Ionic gestures as usual, see, 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

Ionic 3 Change App Icon and Splash Screen

The easiest way to change App Icon and Splash screen in Ionic is to let Ionic handle creation of different versions of icon and splash sizes.

When an app first created, there are 2 files in resources folder, icon.png and splash.png.
Screen Shot 2018-06-06 at 1.34.00 AM

Replace these 2 files with your desired icon and splash files.

  • File name must be the same
  • Size of icon.png must be minimum 1024×1024 and splash.png must be minimum 2732×2732

Once icon.png and splash.png files have been replaced. Follow this steps:

  1. You must have FREE Ionic account. This is because the icon and splash generation/transformation is using Ionic server.
  2. On your project folder, run following command: ionic login
  3. Then enter your email and password.
  4. On project folder, run (replace ios with android if you building Android app): ionic cordova resources ios
  5. Ionic will transform your icon and splash files into different versions that your target platform requires.
  6. In the process, config.xml, will also be updated.