# Ionic 4 swipeable tab

**URL:** <https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810>\
**Category:** Ionic Framework\
**Created:** [May 27, 2019, 4:02am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810 "2019-05-27T04:02:10Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![shyni](https://avatars.discourse-cdn.com/v4/letter/s/7c8e57/32.png) [@shyni](https://forum.ionicframework.com/u/shyni)\
**Post date:** [May 27, 2019, 4:02am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/1 "2019-05-27T04:02:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jylikorpi](https://avatars.discourse-cdn.com/v4/letter/j/9e8a1a/32.png) [@jylikorpi](https://forum.ionicframework.com/u/jylikorpi)\
**Post date:** [May 27, 2019, 10:33am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/2 "2019-05-27T10:33:08Z")

</div>

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”  
]

---

<div class="post-metadata">

**Author:** ![jylikorpi](https://avatars.discourse-cdn.com/v4/letter/j/9e8a1a/32.png) [@jylikorpi](https://forum.ionicframework.com/u/jylikorpi)\
**Post date:** [May 27, 2019, 10:53am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/3 "2019-05-27T10:53:02Z")

</div>

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;  
}

---

<div class="post-metadata">

**Author:** ![shyni](https://avatars.discourse-cdn.com/v4/letter/s/7c8e57/32.png) [@shyni](https://forum.ionicframework.com/u/shyni)\
**Post date:** [May 27, 2019, 11:31am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/4 "2019-05-27T11:31:01Z")

</div>

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"]’.

---

<div class="post-metadata">

**Author:** ![shyni](https://avatars.discourse-cdn.com/v4/letter/s/7c8e57/32.png) [@shyni](https://forum.ionicframework.com/u/shyni)\
**Post date:** [May 27, 2019, 11:36am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/5 "2019-05-27T11:36:01Z")

</div>

What exactly i wanted is this : [Ionic Swipeable Tabs are now here!](https://forum.ionicframework.com/t/ionic-swipeable-tabs-are-now-here/84266) . This now doesn’t work in Ionic 4:slightly\_frowning\_face:

---

<div class="post-metadata">

**Author:** ![jylikorpi](https://avatars.discourse-cdn.com/v4/letter/j/9e8a1a/32.png) [@jylikorpi](https://forum.ionicframework.com/u/jylikorpi)\
**Post date:** [May 27, 2019, 12:23pm UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/6 "2019-05-27T12:23:41Z")

</div>

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

> **[zyra/ionic-super-tabs-example](https://github.com/zyra/ionic-super-tabs-example)**
>
> Example app for ionic-super-tabs library. Contribute to zyra/ionic-super-tabs-example development by creating an account on GitHub.

Download the zip, extract, then -\>

1. npm install
2. npm outdated
3. npm update
4. 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

---

<div class="post-metadata">

**Author:** ![shyni](https://avatars.discourse-cdn.com/v4/letter/s/7c8e57/32.png) [@shyni](https://forum.ionicframework.com/u/shyni)\
**Post date:** [May 28, 2019, 3:56am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/7 "2019-05-28T03:56:14Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![IonicGeoff](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ionicgeoff/32/128657_2.png) [@IonicGeoff](https://forum.ionicframework.com/u/IonicGeoff)\
**Post date:** [May 28, 2019, 4:56am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/8 "2019-05-28T04:56:18Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jylikorpi](https://avatars.discourse-cdn.com/v4/letter/j/9e8a1a/32.png) [@jylikorpi](https://forum.ionicframework.com/u/jylikorpi)\
**Post date:** [May 28, 2019, 5:10am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/9 "2019-05-28T05:10:45Z")

</div>

Working just five for me in Chrome with ionic serve.

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/b/a/baa5d12ec5c91196d3a4539f50da3b368b7cd70e.png)

---

<div class="post-metadata">

**Author:** ![IonicGeoff](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ionicgeoff/32/128657_2.png) [@IonicGeoff](https://forum.ionicframework.com/u/IonicGeoff)\
**Post date:** [May 29, 2019, 12:18am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/10 "2019-05-29T00:18:19Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![jylikorpi](https://avatars.discourse-cdn.com/v4/letter/j/9e8a1a/32.png) [@jylikorpi](https://forum.ionicframework.com/u/jylikorpi)\
**Post date:** [May 29, 2019, 10:35am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/11 "2019-05-29T10:35:50Z")

</div>

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:

```auto
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”

```auto
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)

```auto
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)

```auto
<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)

```auto
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.

---

<div class="post-metadata">

**Author:** ![shyni](https://avatars.discourse-cdn.com/v4/letter/s/7c8e57/32.png) [@shyni](https://forum.ionicframework.com/u/shyni)\
**Post date:** [May 30, 2019, 4:37am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/12 "2019-05-30T04:37:17Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![jylikorpi](https://avatars.discourse-cdn.com/v4/letter/j/9e8a1a/32.png) [@jylikorpi](https://forum.ionicframework.com/u/jylikorpi)\
**Post date:** [May 30, 2019, 8:48am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/13 "2019-05-30T08:48:02Z")

</div>

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)

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

```

---

<div class="post-metadata">

**Author:** ![shyni](https://avatars.discourse-cdn.com/v4/letter/s/7c8e57/32.png) [@shyni](https://forum.ionicframework.com/u/shyni)\
**Post date:** [May 30, 2019, 8:55am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/14 "2019-05-30T08:55:32Z")

</div>

I have already done that

---

<div class="post-metadata">

**Author:** ![jylikorpi](https://avatars.discourse-cdn.com/v4/letter/j/9e8a1a/32.png) [@jylikorpi](https://forum.ionicframework.com/u/jylikorpi)\
**Post date:** [May 30, 2019, 9:28am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/15 "2019-05-30T09:28:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![shyni](https://avatars.discourse-cdn.com/v4/letter/s/7c8e57/32.png) [@shyni](https://forum.ionicframework.com/u/shyni)\
**Post date:** [June 10, 2019, 10:08am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/16 "2019-06-10T10:08:30Z")

</div>

Ok… Thank u soo much for your help

---

<div class="post-metadata">

**Author:** ![SisandaGiven](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@SisandaGiven](https://forum.ionicframework.com/u/SisandaGiven)\
**Post date:** [October 2, 2019, 9:35am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/17 "2019-10-02T09:35:09Z")

</div>

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’

---

<div class="post-metadata">

**Author:** ![Testalus](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/testalus/32/129085_2.png) [@Testalus](https://forum.ionicframework.com/u/Testalus)\
**Post date:** [November 4, 2019, 4:39pm UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/18 "2019-11-04T16:39:57Z")

</div>

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:

```auto
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;
  }
}

```

---

<div class="post-metadata">

**Author:** ![SisandaGiven](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@SisandaGiven](https://forum.ionicframework.com/u/SisandaGiven)\
**Post date:** [November 5, 2019, 8:20am UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/19 "2019-11-05T08:20:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![awaisdev](https://avatars.discourse-cdn.com/v4/letter/a/59ef9b/32.png) [@awaisdev](https://forum.ionicframework.com/u/awaisdev)\
**Post date:** [September 1, 2020, 7:11pm UTC](https://forum.ionicframework.com/t/ionic-4-swipeable-tab/164810/20 "2020-09-01T19:11:57Z")

</div>

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