Ionic Swipeable Tabs are now here!


@ihadeed first of all, thanks for this great plugin!

Is there also a possibility to add a “spaceBetween” the pages like in the ion-slides?
-> -> “Input Properties” -> “spaceBetween”

Thanks so far,


I got an error .So far what i have done is
npm install ionic2-super-tabs --save

import { SuperTabsModule } from 'ionic2-super-tabs';

imports: [


My Tabs.html file

    <super-tab [tabRoot]="tab1Root" title="First page"></super-tab>
    <super-tab [tabRoot]="tab1Root" title="Second page"></super-tab>
    <super-tab [tabRoot]="tab1Root" title="Third page"></super-tab>


compiler.js:466 Uncaught Error: Template parse errors:
Can’t bind to ‘tabRoot’ since it isn’t a known property of ‘super-tab’.

  1. If ‘super-tab’ is an Angular component and it has ‘tabRoot’ input, then verify that it is part of this module.
  2. If ‘super-tab’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. ("
    <super-tab [ERROR ->][tabRoot]=“tab1Root” title=“First page”>
    <super-tab [tabRoot]=“tab1Root” title=“Secon”): ng:///AppModule/TabsPage.html@1:15
    ’super-tab’ is not a known element:
  4. If ‘super-tab’ is an Angular component, then verify that it is part of this module.
  5. If ‘super-tab’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. ("
    [ERROR ->]<super-tab [tabRoot]=“tab1Root” title=“First page”>
    <super-tab [tabRoot]=“tab1Root” t"): ng:///AppModule/TabsPage.html@1:4



I just start new project and install swipable tabs. But tabs are without any CSS style and also can’t be changed by swiping.

Should I place CSS manually to the project?



I think there is a bug in the newest version. See this issue on github. Try reverting to 4.1.4.
npm install ionic2-super-tabs@4.1.4


use: [root] instead of [tabRoot]


Thanks, It worked :+1::+1:


Hi. I facing some problem when i try to use this plugin in my project. I’m using ionic v 3.9.2

the tabs doesnt display as it should. it show something similar to this.

i’m following steps by steps from documentation.


UPDATE: All of sudden the code working but tab at top of title and swipe did not working


Hello, @ihadeed

I follow your code for swipeable tabs

but when i go to page i got error like
Cannot find module "…/ionic2-super-tabs/src"
and page shows white screen

please help me


Hey Hi… First of all thank you so much for this solution on swipeable tabs…!!! very useful…

I need some suggestions on the following:
I am stuck in a situation where the Home page tab has segments in it. Now when the user swipes left it should switch the segments and once the end of segment is reached then the next swipe should switch the tabs. Please let me know if this is achievable with your above solution. Badly in need of a solution for this requesting you to please help me…

Thanks in advance :slight_smile:2018_01_29_16_58_33_Ionic_App


Hey guys

I got locked out of my account that I used for this post.

Came here to say, if you’re having trouble with this module, please go to the Github repository. Check existing issues, read any notes in the readme file, and then post a new issue if you still can’t find what you’re looking for.

I will not be monitoring any issues and/or provide any kind of support here. Github issues are more organized, and they make it easier to track issues & respond to them.

Thanks for understanding!


Hi, I have raised this requirement as an issue in your git hub repo ( Requesting you to please address the same.




I’m using Linux mint. Is this not support in linux?? Any solution plz…


Hi All, I implemented the swipeable tabs but I need to show the tabs below the ion-header of individual tabs also I have to hide tabs on the sub pages. Any help for me on this?


hi, can you send me your code please??


You must use



how to hide tabs in the inner pages? tabsHideOnSubPages:true is not working. Could any one please help?


Hi all,
I have just installed this tabs to my older project (after updating to new Ionic). I placed the tabs to the root page. But if I come to this page firstly, I do not see the tabs toolbar - it has html attribute hidden. If I go to the detail from tab and then go back, the tab toolbar is shown - it has not attribute hidden.

Why this is happening? I have the code exactly by documentation…



hi, i am using super tab working good.



just curious. I tried to implement supertabs in Stackblitz (minimal coding), but can’t get it to work.

So I just added the module to app.module.ts, added the tabs reference in tabs.html and amended tabs.ts.

And of course, the NPM package added

Still no joy…

Anyone care to assist?