How to hide Tabs on a specific child page of a root Tab page

Ionic Framework ionic-v3
1

Hi,
I am using Ionic 3.5 and I am unable to hide a specific child page of a Tab. I have fab button on my TabsPage. When the fab button is clicked, it shows a new page. However this new page becomes the child page for the root of TabsPage and Tabs appear for it.
I can use tabsHideOnSubPages but that will hide tabs on all the sub pages which I don’t want. Is there a way I can dynamically set tabsHideOnSubPages to true if a specific view is loaded?
Any other solutions?

Thanks!

2

What happens if you use setRoot()?

1 Like
3

I am fairly new to Ionic. Did you mean to setRoot() in the app component?

my pages structure is like this >

Pages
|
|-Home page
|      |
|      |- FAB button
|              |
|              |- (onClick) pushes a new page to the navCtrl, 
|                      |- I want tabs to not show up on this new page. this page uses ion-navbar
|                            and not ion-nav
|-Tabs Page
       |
       |- Tab1(root is set to Home Page)
       |- Tab2(root is set to some other page)

If I try app.getRootNav().setRoot() on the new page, it gives this error -> uncaught (in promise): nav controller was destroyed

4

So, this is what worked for me
first import App from ionic-angular
then set a click handler on the Fab button

this.app.getNavs()[0].setRoot(PageName, {}, {animate: true, direction: 'forward'})

using animate:true, it animates nicely while going to the desired page. Hope it helps someone else struggling with something similar.

5

I hate to be a wet blanket, but I strongly disagree with the advice in the previous post. Action at a distance (such as injecting App and rooting around in its navigation stack) represents to me fundamentally flawed design. In order to have an app that is clean, maintainable, readable, and testable, every element must be independent of one another, with clearly defined communication boundaries.

6

Could you share a better, cleaner way to achieve this (in regards to the specific requirement)? Thanks

1 Like
7

You could expose a Subject somewhere, subscribe to it in the app component, and call setRoot() from there, but I have to say that I have a problem with the entire premise from a UI perspective.

Tabs are for the user’s control; to switch between at will various areas of functionality in an app. If they are ever present, they should always be present.

Perhaps you could achieve your goal by popping a modal or action sheet? That way, it is clear to the user that the vanishing of the tabs is a temporary situation, with an evident way of restoring them.

3 Likes
8

Thank you very much for the suggestions. I think using a Modal solves my problem efficiently as it is an input form.

1 Like
9

@rapropos Hi, I was using getRootNav() in my popover page as pushing a new page from popover breaks the navigation stack and the back button doesn’t work. The getRootNav() solution was suggested by one of the Ionic team member on Github.

Now that getRootNav() is going to be deprecated and reading your views made me realize this isn’t such a clean method, is there any other clean workaround that one can think of? Thanks.

2 Likes
10

Is getRootNav() still slated for deprecation? Thanks.

11

I know its pretty late but this is something we can do:

in ionViewDidEnter:
const tabs = this.navCtrl.parent;
if (tabs && tabs instanceof Tabs) {
tabs.setTabbarHidden(false);
}

and on IonViewWillLeave set it back to true.

Please note: I agree that this has to be tackled via design or Modal. If none of those are possible in your project you can use this bandaid.

1 Like