How to hide tabs when pushing a new page


#1

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

I am having same problem


#3

Have the issue been solved yet?


#4

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


#5

Great, it works for me, thank you~


#6

Ur welcome :slight_smile:


#7

your are amazing !!!


#8

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


#9

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

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


#10

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


#11

Haha, ur welcome :slight_smile: __


#12

: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


#13

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


#14

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


#15

thank you, this is legendary :raised_hands:t4:


#16

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


#17

Great, glad it solved ur problem :slight_smile:


#18

Hi. Where can I find AppController ?


#19

thanks a lot, it works


#20

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>