How to hide tabs when pushing a new page

At least in Ionic Beta6, I can use the following code to hide tabs when pushing a new page.

<ion-navbar hide-tabs>
    <ion-title>
        <h3>Login</h3>
    </ion-title>
</ion-navbar>

But, in Beta10, ion-navbar must be placed in ion-header, so I updated the code to

<ion-header>
    <ion-navbar hide-tabs>
        <ion-title>
            <h3>Login</h3>
        </ion-title>
    </ion-navbar>
</ion-header>

After that, the tabs cannot be hidded. does anybody encounter the same issue, or is there a new way to hide tabs?

Thanks in advance.

2 Likes

I am having same problem

Have the issue been solved yet?

The easiest way depending on your use case is to add the new view to the root nav controller. This will open your view as a new page without the tabbar.

Example:

this.nav.rootNav.push(ViewController);

1 Like

Great, it works for me, thank you~

Ur welcome :slight_smile:

your are amazing !!!

I belive that this doesn’t work anymore since beta 11. Any ideas?

rootNav has been removed from the NavController. You have to use the App controller instead:

this.app.getRootNav().push(myPage);

8 Likes

Dude, i love u!
I was trying to solve it all morning.

1 Like

Haha, ur welcome :slight_smile: __

:disappointed_relieved: actually this method gives me a funny hardware back button behavior. It’s like you press the button but nothing happends until you get all the way back to the first page… weird

It works, thanks a lot!!!:heart_eyes:

you can simply give a config in app.ts like

ionicBootstrap(MyApp,null, {tabsHideOnSubPages:“true”});

And its done :slight_smile:

hope it works as a life saver for you like it did for me :wink: …!!
ping back in case of any issue

11 Likes

thank you, this is legendary :raised_hands:t4:

This does the job for me :smiley: I’m glad that I found this answer through some very vague google searching for my problem.

1 Like

Great, glad it solved ur problem :slight_smile:

Hi. Where can I find AppController ?

thanks a lot, it works

You can do this in your tabs template using tabsHideOnSubPages attribute.

<ion-tabs>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle" tabsHideOnSubPages="true"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>
21 Likes