Ionic-framework: feat: Hide Tabs on sub-pages

[ASHFAQPATWARI]

Feature Request

Recommended Approach to hide tabs programmatically.

Ionic version:
[x] 4.x

Describe the Feature Request

There is no proper way to hide tab-bar in Ionic v4.

There is this tutorial: https://medium.com/@JordanBenge/ionic-4-hiding-showing-tabs-on-certain-pages-31cf2380a5db

But with this the content moves up or down resulting in jerks and bad user experience.

If Ionic Team can give a recommended way to achieve this into docs, it will be very helpful for many developers.

Describe Preferred Solution
May be a similar approach like the tutorial but with smoother results.

[liamdebeasi]

Thanks for the issue. Are you able to just not make the pages children of your tabs component? For example, you would have /tabs/tab1 and then you can navigate to /childPage.

[ASHFAQPATWARI]

@liamdebeasi I already have subpages and i can navigate to them.
For eg:

1. I have tab called /categories
   
   
   
   1. I can navigate to /categories/1
   
   
   2. I want the tabs to be hidden on the childpage
   
   

Basically you can say a way to achive tabsHideOnSubPages functionality of v3 with v4.

[patrick-entinux]

Hope this is not intruding, but just want to add an alternative method. When I want the tabs to be hidden on some child page, I would set the route for that other page to be a 'regular' page, not a child of the tab page. For example:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'categories',
        component: CategoriesPage,
      },
      {
        path: 'settings',
        component: SettingsPage,
      },
    ],
  },
  {
    path: 'categories/:id',
    component: CategoryDetailsPage,
  },
];

Then from /categories page, you could have a link like:

<a routerLink="/categories/1">Details for Category 1</a>

And the tabs can transition away with the rest of the previous page.

However, this method has some gotcha's with toolbar background colors too: https://github.com/ionic-team/ionic/issues/19372

[ASHFAQPATWARI]

@patrick-entinux Well this is one of the thing which can be tried but I believe there must be a way to hide tabs as well. Setting routes like above seems more of a hack.