Ionic 4 swipeable tab

shyni · May 27, 2019, 4:02am

Is there any way to add swipeable tab to an existing Ionic blank project.
I tried installing npm i -S @ionic-super-tabs/angular , which doesn’t work in Ionic 4.
Please help

jylikorpi · May 27, 2019, 10:33am

From what I understand it should work with a workaround in Ionic 4. Add this to your tsconfig.app.json -file:

“include”: [
“src”,
“node_modules/@ionic-super-tabs/core/dist/types/components.d.ts”
]

jylikorpi · May 27, 2019, 10:53am

Or if you meant to do a scrollable tab-bar, then just add as many tabs as you want and add this to your css.

ion-tab-button {
min-width: 33.3vw; //Or whatever width you want tab to be - for four visible tabs: min-width: 25vw;
}

ion-tab-bar {
overflow-x: auto;
justify-content: left;
}

shyni · May 27, 2019, 11:31am

This give me the error : error TS18003: No inputs were found in config file ‘tsconfig.json’. Specified ‘include’ paths were ‘[“src”,“node_modules/@ionic-super-tabs/core/dist/types/components.d.ts”]’ and ‘exclude’ paths were ‘["…/out-tsc/app"]’.

shyni · May 27, 2019, 11:36am

What exactly i wanted is this : Ionic Swipeable Tabs are now here! . This now doesn’t work in Ionic 4:slightly_frowning_face:

jylikorpi · May 27, 2019, 12:23pm

Why not start from the example project. That works just fine for me.

Download the zip, extract, then ->

npm install
npm outdated
npm update
npm audit fix

and ionic serve

Works for me. With these (ionic info):

Ionic:

ionic (Ionic CLI) : 4.12.0 (C:\Users\janiy\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.4.2
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.4.1

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : not available
Cordova Plugins : not available

System:

Android SDK Tools : 26.1.1 (C:\Users\janiy\AppData\Local\Android\Sdk)
NodeJS : v10.13.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10

shyni · May 28, 2019, 3:56am

Actually i wanted to add this swipeable tab in my existing project ,which is created by ionic 4 blank template…And want to add this functionality in only one screen

If there is no way to add it in existing project i ll create by this…

IonicGeoff · May 28, 2019, 4:56am

@jylikorpi - does this work in a browser? Not working for me, with same config as you.

jylikorpi · May 28, 2019, 5:10am

Working just five for me in Chrome with ionic serve.

IonicGeoff · May 29, 2019, 12:18am

Hi, I meant the swipe to change tabs wasn’t working, does that work in a browser? (I Didn’t try it on a device)

jylikorpi · May 29, 2019, 10:35am

I made swipable tabs (with gesture) to a blank ionic tabs project. Here are the changes you need to make / add to a blank tabs project:

start new project with “ionic start swipe-tabs tabs”
install hammerjs with “npm install hammerjs --save”
import hammerjs to main.ts -file:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import 'hammerjs';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

create swipe service with “ionic g service services/swipe”

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

@Injectable({
  providedIn: 'root'
})
export class SwipeService {

  constructor(private navCtrl: NavController) { }

  swipe(e,index: number) {
    if (e.angle < -90) {
      if (index === 1) {
        this.navCtrl.navigateRoot('tabs/tab2');
      }
      else if (index === 2) {
        this.navCtrl.navigateRoot('tabs/tab3');
      }
    } else if (e.angle < 0) {
      if (index === 2) {
        this.navCtrl.navigateRoot('tabs/tab1');
      }
      else if (index === 3) {
        this.navCtrl.navigateRoot('tabs/tab2');
      }
    } else if (e.angle < 90) {
      if (index === 2) {
        this.navCtrl.navigateRoot('tabs/tab1');
      }
      else if (index === 3) {
        this.navCtrl.navigateRoot('tabs/tab2');
      }
    } else {
      if (index === 1) {
        this.navCtrl.navigateRoot('tabs/tab2');
      }
      else if (index === 2) {
        this.navCtrl.navigateRoot('tabs/tab3');
      }
    }
  }
}

import swipe service to tabs ts-files (tab1.page.ts, tab2.page.ts, tab3.page.ts)

import { SwipeService } from '../services/swipe.service';
constructor(private swipeService: SwipeService) {}

add swipe service function call (with page index) to tabs pages (tab1.page.html, tab2.page.html, tab3.page.html)

<ion-content (swipe)="swipeService.swipe($event,1)">

! remember to change index number on each page (1, 2, 3)

export routes from tabs.router.module (just add export in front)

export const routes: Routes = [

Now you should be able to change tabs (tab page) with swiping left or right. I hope I didn’t forget something, but if you try this and it doesn’t work I will try to help you.

shyni · May 30, 2019, 4:37am

Thank u soo much for your great answer.
Could you please help me now…
I tried this as u said but now am getting an error:

Tab1Page.html:8 ERROR TypeError: Cannot read property ‘swipe’ of undefined
at Object.eval [as handleEvent] (Tab1Page.html:8)
at handleEvent (core.js:23107)
at callWithDebugContext (core.js:24177)
at Object.debugHandleEvent [as handleEvent] (core.js:23904)
at dispatchEvent (core.js:20556)

Please help…

jylikorpi · May 30, 2019, 8:48am

Did you forget to import and declare SwipeService in your tab1.page.ts -file?

import swipe service to tabs ts-files (tab1.page.ts, tab2.page.ts, tab3.page.ts)

import { SwipeService } from '../services/swipe.service';
constructor(private swipeService: SwipeService) {}

shyni · May 30, 2019, 8:55am

I have already done that

jylikorpi · May 30, 2019, 9:28am

Sorry but I don’t know what is wrong in your code. I can’t reproduce that error you have.

shyni · June 10, 2019, 10:08am

Ok… Thank u soo much for your help

SisandaGiven · October 2, 2019, 9:35am

Thanks you so much it worked for me, even though i’m getting an error that ‘Identifier ‘swipeService’ refers to a private member of the component’

Testalus · November 4, 2019, 4:39pm

I tried to fix this issue by using a global variable for the SwipeService and refering to it in the constructor. No error message so far but i’m not sure if that’s good practice^^. Here’S an example for tab1.page.ts:

import { Component } from '@angular/core';
import { SwipeService } from '../services/swipe.service';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  swipeService: SwipeService;

  constructor(swipeService: SwipeService) {
    this.swipeService = swipeService;
  }
}

SisandaGiven · November 5, 2019, 8:20am

Thanks for the response. I used public instead of private when I was injecting the the swipe service on the constructor and the error went away…but I’m also not sure if it’s good practice.

awaisdev · September 1, 2020, 7:11pm

I implemented the same thing but i cant shift pages through swipe i am using chrome