Swipe Up / Down

December 4, 2018

You would think adding the ability to swipe up and down pages on a phone app would be straight forward, since well it’s a phone app. But surprising it took me a couple hours of research to figure it out.

This article is going to be just about getting an app setup that you can slide between two pages.  Let’s get started!

First create a new ionic project.

ionic start MYPROJECT
ionic cordova platform add –save android
cordova prepare

I selected a blank project, just keeps things simple.  And when I’m asked if I want to “Integrate your new app Cordova to target native iOS and Android?” I say yes.  But when I’m asked if I want to “Install the free Ionic Pro SDK and connect your app?” I say no.

For adding the cordova platform, I select “android” when prompted.

Next, we are going to add a new directive.  This is where the swipe functionality is going to reside.

Ionic generate DIRECTIVE MYSWIPE

So as show I use the “generate” command with the option to create a “DIRECTIVE” which I am calling “myswipe”.  You of course can name it whatever makes sense to you.

Now with your editor of choice, open up the new file which should be located in “src/directives/MYSWIPE/MYSWIPE.js

I’m going to replace everything BUT the directive class name in the file with the following code:

import {Directive, ElementRef, Output, OnInit, OnDestroy, EventEmitter} from '@angular/core';
import {Gesture} from 'ionic-angular/gestures/gesture';
declare var Hammer: any;

@Directive({
    selector: '[swipe-vertical]' // Attribute selector
})
export class MyswipeDirective implements OnInit, OnDestroy {
    @Output() onSwipeUp = new EventEmitter();
    @Output() onSwipeDown = new EventEmitter();

    private el: HTMLElement;
    private swipeGesture: Gesture;
    private swipeDownGesture: Gesture;

    constructor(el: ElementRef) {
        this.el = el.nativeElement;
    }

    ngOnInit() {
        this.swipeGesture = new Gesture(this.el, {
            recognizers: [
                [Hammer.Swipe, {direction: Hammer.DIRECTION_VERTICAL}]
            ]
        });
        this.swipeGesture.listen();
        this.swipeGesture.on('swipeup', e => {
            this.onSwipeUp.emit({ el: this.el });
        });
        this.swipeGesture.on('swipedown', e => {
            this.onSwipeDown.emit({ el: this.el });
        });
    }

    ngOnDestroy() {
        this.swipeGesture.destroy();
    }
}

Now we need to update our “app.modules.ts” file, which of course is in the “src/app” directory.  Once open I add an “import { MyswipeDirective } from ‘…/directive/myswipe/myswipe.js’;” to the imports and “MyswipeDirective” under “declarations”.

Here is what my “app.modules.ts” file looks like now:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyswipeDirective } from '.../directives/myswipe/myswipe.ts';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import {MyswipeDirective} from "../directives/myswipe/myswipe";

@NgModule({
  declarations: [
    MyApp,
    HomePage, 
      MyswipeDirective
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

GREAT!  Now lets update our pages.  Well we already have a home page, so lets add a test page.

Ionic generate PAGE TEST

Which also means we have to update “app.modules.ts” again:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import {MyswipeDirective} from "../directives/myswipe/myswipe";

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { TestPage } from '../pages/test/test';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
      TestPage,
      MyswipeDirective
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
      TestPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Again I’m using the generate command, this time I want to create a PAGE and I’m going to call it TEST.

So now we’re going to modify both pages, first lets start with HOME, which is located in “src/pages/home”.

Lets open up the .html file and modify the “ion-content” tag to be, in fact that could be the only thing in your file if you removed the “ion-header” snippet.

<ion-content class="home" swipe-vertical (onSwipeUp)="onSwipeUp($event)">
  The world is your oyster.
  <p>
    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
  </p>
</ion-content>

But we also have to update the .ts file to handle the logic…

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { TestPage } from '../test/test';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

    onSwipeUp(e)
    {
        this.navCtrl.push(TestPage);
    }

}

Now lets modify the test files, located in “src/pages/test”:

First the .html file…

<ion-content class="home" swipe-vertical (onSwipeDown)="onSwipeDown($event)">
  Test page!
</ion-content>

Then the .ts file…

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { HomePage } from '../home/home';

/**
 * Generated class for the TestPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-test',
  templateUrl: 'test.html',
})
export class TestPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TestPage');
  }

    onSwipeDown(e)
    {
        this.navCtrl.push(HomePage);
}

}

That should be it.  Now you can either test it in your browser by doing “ionic serve” or on your phone.

If you would like to download the code to this project, you can access it under the "DEMOS" section from the main menu.

I hope you found this information useful!