Hide tabs in sub pages in Ionic 2 [duplicate]

Answer 1

To be completely flexible with when to hide and show the tabs, you can also just use a CSS class like the following:

ion-tabs.hidden div.tabbar {
    display: none
}

In your tabs.ts you can have a boolean variable to denote if the tabs should be hidden.

public hideTabs:boolean = false;

In tabs.html add ngClass to ion-tabs to apply the hideTabs style when the variable is true:

<ion-tabs [ngClass]="{'hidden': hideTabs}">

You can toggle the hideTabs variable in any function f.e. inside the function that navigates to a subpage, but also in ionic's ionViewWillEnter() functions.

Answer 2

You can also try by setting the tabsHideOnSubPages config property in the app.module.ts file like this:

... 
imports: [
    IonicModule.forRoot(MyApp, {
        // Tabs config
        tabsHideOnSubPages: true,
        ...
    })
]
...

---

From Ionic docs:

tabsHideOnSubPages: boolean

Whether to hide the tabs on child pages or not. If true it will not show the tabs on child pages.

Answer 3

To add "tabsHideOnSubPages: true" in app.module.ts works for me. (ionic 2)