How to hide tabs when pushing a new page

Ionic Framework ionic-v3
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 Likes
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);

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

8 Likes
10

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

1 Like
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

11 Likes
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.

1 Like
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>
19 Likes