Add Swipe Gesture to Ionic 3 Angular 5 Tabs

This is just a short example of adding swipe gesture to Ionic 3 and Angular 5 tabs with a transition animation. The tutorial is requested from one of our reader which need to add swipe gesture to the current Ionic 3 Tabs. It might be can be applied to other components that need custom touch gesture. We will use the Telerik Native Page-Transition plugin for making the animation to the tabs change. We use the native plugin because we are testing this tutorial on the real device.

Jumps to the steps:

• Create a New Ionic 3 Angular 5 App
• Modify Current Tabs by Adding Swipe Gesture
• Add Transition Animation for Tabs Change

Swipe gesture is the detection of the touch and moves to left, right, up, down in the device screen.

The following tools, framework, and modules are required for this example:

1. Ionic 3 Framework
2. Node.js
3. Angular 5
4. Telerik Native Page-Transition Plugin
5. Terminal or Command Line
6. IDE or Text Editor

Make sure before continuing to the example, you have installed the latest recommended Node.js. Check the Ionic 3 for the latest version.

node -v
v8.9.3
npm -v
5.5.1
ionic -v
3.19.0
cordova -v
7.1.0

To update the Ionic framework to the latest version type this command.

sudo npm i -D -E ionic@latest

Create a New Ionic 3 Angular 5 App

As usual, we always creating an example from scratch by creating a new app. Type this command to create a new Ionic 3 Angular 5 app using Tabs template.

ionic start ionic3-tab-swipe tabs

That command will create an Ionic 3 Angular 5 app with the name `ionic3-tab-swipe` and use Tabs template as the default layout. Next, go to the newly created app folder.

cd ./ionic3-tab-swipe

Now, run the app on the browser to make sure everything works smoothly.

ionic serve -l

You should see this page if everything configured correctly.

Modify Current Tabs by Adding Swipe Gesture

We will do a little modification of the current tabs and tab pages. First, to make a different look and feel between tabs, we have to change the different background color for them. Open and edit `src/pages/home/home.scss` then add these lines of CSS codes inside `page-home` bracket.

.scroll-content {
  background-color: red;
  background-image: linear-gradient(red, orange);
  color: white;
}

And this lines to `src/contact/contact.scss`.

.scroll-content {
  background-color: green;
  background-image: linear-gradient(green, yellow);
  color: white;
}

And this lines to `src/about/about.scss`.

.scroll-content {
  background-color: blue;
  background-image: linear-gradient(blue, aqua);
  color: white;
}

About page still blank, so we fill it with some free text with header and paragraph.

<h2>About This Example</h2>
<p>
  This is just a little example that might be unuseful for you, sorry if that makes you happy.
</p>

Next, add a swipe gesture to each page. Open and edit `src/pages/home/home.html` then add this `div` tag inside `ion-content` tag wrap all content.

<ion-content padding>
  <div class="main-content" (swipe)="swipe($event)">
    <h2>Welcome to Ionic!</h2>
    <p>
      This starter project comes with simple tabs-based layout for apps
      that are going to primarily use a Tabbed UI.
    </p>
    <p>
      Take a look at the <code>src/pages/</code> directory to add or change tabs,
      update any existing page or create new pages.
    </p>
  </div>
</ion-content>

Do the same way with `about.html` and `contact.html`. Don't put `swipe` code inside `ion-content` because it's won't work on the real device. So, we need to set the height of that all `div` by open and edit `src/app/app.scss` then add this CSS codes below of the file.

.main-content {
  height: 100%;
}

Open and edit `src/pages/home/home.ts` then add this function.

swipe(event) {
  if(event.direction === 2) {
    this.navCtrl.parent.select(1);
  }
}

Open and edit `src/pages/home/contact.ts` then add this function.

swipe(event) {
  if(event.direction === 4) {
    this.navCtrl.parent.select(1);
  }
}

Open and edit `src/pages/home/about.ts` then add this function.

swipe(event) {
  if(event.direction === 2) {
    this.navCtrl.parent.select(2);
  }
  if(event.direction === 4) {
    this.navCtrl.parent.select(0);
  }
}

That just enabling the swipe gesture, you can try by running the app again in the browser.

ionic serve -l

Or in the real device, but first, remove and add the platform.

ionic cordova platform rm android
ionic cordova platform add android
ionic cordova platform rm ios
ionic cordova platform add ios

Then run on the real device.

ionic cordova run android
ionic cordova run ios

Add Transition Animation for Tabs Change

Above step not like swipe-able tabs, because every time the tab change it not started by transition animation. We will use the Telerik Native Page-Transition plugin for this because we are using the real device. Install the plugin by type these commands.

ionic cordova plugin add com.telerik.plugins.nativepagetransitions
npm install --save @ionic-native/native-page-transitions

Open and edit `src/app/app.module.ts` then add this import of NativePageTransitions.

import { NativePageTransitions } from '@ionic-native/native-page-transitions';

Also, add to `@NgModule` providers.

providers: [
  StatusBar,
  SplashScreen,
  {provide: ErrorHandler, useClass: IonicErrorHandler},
  NativePageTransitions
]

Next, open and edit `src/pages/tabs/tabs.ts` then add these imports of NativePageTransitions and NativeTransitionOptions.

import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions';

Inject that module to the constructor.

constructor(private nativePageTransitions: NativePageTransitions) {}

Declare these variables for hold tabs index and check if the tab is loaded.

loaded:   boolean = false;
tabIndex: number  = 0;

Create the function for getting animation direction by tab index.

private getAnimationDirection(index):string {
  var currentIndex = this.tabIndex;

  this.tabIndex = index;

  switch (true){
    case (currentIndex < index):
      return('left');
    case (currentIndex > index):
      return ('right');
  }
}

Create the function for the animated transition.

public transition(e):void {
  let options: NativeTransitionOptions = {
   direction:this.getAnimationDirection(e.index),
   duration: 250,
   slowdownfactor: -1,
   slidePixels: 0,
   iosdelay: 20,
   androiddelay: 0,
   fixedPixelsTop: 0,
   fixedPixelsBottom: 48
  };

  if (!this.loaded) {
    this.loaded = true;
    return;
  }

  this.nativePageTransitions.slide(options);
}

Now, open and edit `src/pages/tabs/tabs.html` then add this codes inside `ion-tabs` tag.

<ion-tabs (ionChange)="transition($event)">

Now, you can run again on the real device and see how it looks like.

That's it, a simple swipe gesture on Ionic 3 tabs. For the full source code, you can grab on our GitHub.

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ionic 4 - Full Starter App and save development and design time. Android, iOS, and PWA, 100+ Screens and Components, the most complete and advance Ionic Template.

That just the basic. If you need more deep learning about Ionic, Angular, and Typescript, you can take the following cheap course:

• IONIC 4 Design Hybrid Mobile Applications IOS & Android
• Wordpress Rest API and Ionic 4 (Angular) App With Auth
• Mobile App from Development to Deployment - IONIC 4
• Ionic 4 Crash Course with Heartstone API & Angular
• Ionic 4 Mega Course: Build 10 Real World Apps

Thanks!