Ionic 5 ion-tabs hiding in some specific pages

Question

I have created tab pages and included in my app.component.html file by selector my problem is that I want to hide tab in some specific pages can anyone help me with that. below I'm sharing the code which I have created tab page.

tab.page.html

        <ion-tabs>
            <ion-tab-bar slot="bottom">
                 <ion-tab-button tab="home">
                   <ion-icon name="home"></ion-icon>
                <ion-label>Home</ion-label>
            </ion-tab-button>
    
            <ion-tab-button tab="search">
                <ion-icon name="search"></ion-icon>
                <ion-label>Search</ion-label>
            </ion-tab-button>
    
            <ion-tab-button tab="click-history">
                <ion-icon name="color-wand"></ion-icon>
                <ion-label>Clicks</ion-label>
            </ion-tab-button>
    
            <ion-tab-button tab="profile">
                <ion-icon name="person"></ion-icon>
                <ion-label>Profile</ion-label>
            </ion-tab-button>
        </ion-tab-bar>
    </ion-tabs>

app.component.html

    <ion-app>
        <app-menu></app-menu>
        <ion-router-outlet id="main"></ion-router-outlet>
        <app-tab></app-tab>
    </ion-app>

Answer 1

What do mean exactly by "pages"? If you mean specific routes, you could subscribe to Router and set a boolean flag in App component controller

app.component.ts

import { NavigationEnd, Router } from '@angular/router';

import { Subject } from 'rxjs';
import { takeUntil, filter } from 'rxjs/operators';

export class AppComponent implements OnInit, OnDestroy {
  closed$ = new Subject<any>();
  showTabs = true; // <-- show tabs by default

  constructor(private _router: Router) { }

  ngOnInit() {
    this._router.events.pipe(
      filter(e => e instanceof NavigationEnd),
      takeUntil(this.closed$)
    ).subscribe(event => {
      if (event['url'] === '/somePage') {
        this.showTabs = false; // <-- hide tabs on specific pages
      }
    });
  }
  
  ngOnDestroy() {
    this.closed$.next(); // <-- close subscription when component is destroyed
  }
}

app.component.html

<ion-app>
  <app-menu></app-menu>
  <ion-router-outlet id="main"></ion-router-outlet>
  <app-tab *ngIf="showTabs"></app-tab>
</ion-app>

Answer 2

put the routes outside that don't need to have the tabbar showing in them below the tabbar out of ion-routeroutlet

<ion-app>
  <app-menu></app-menu>
  <ion-router-outlet id="main"></ion-router-outlet>
  <app-tab ></app-tab>
  <route path="/path_with_no_tabbar" component={component_wih_no_tabbar}/>
</ion-app>

Answer 3

For Ionic 6 I created a lifecycle hook that works pretty well, you can also manually add the lifecycle hooks to each page but this is nicer for reusability.

import { LifeCycleCallback, useIonViewWillEnter, useIonViewWillLeave } from "@ionic/react";

const onEnter: LifeCycleCallback = () => {
  const elements = document.getElementsByTagName('ion-tab-bar') as HTMLCollectionOf<HTMLElement>;
  for (let i = 0; i < elements.length; i++) {
    elements[i].style.display = 'none';
  }
};

const onLeave: LifeCycleCallback = () => {
  const elements = document.getElementsByTagName('ion-tab-bar') as HTMLCollectionOf<HTMLElement>;
  for (let i = 0; i < elements.length; i++) {
    elements[i].style.display = 'flex';
  }
};

/**
 * 
 * Used to hide/show the `ion-tab-bar` on page life cycle
 */
const useHideIonTabBar = () => {
  useIonViewWillEnter(onEnter);
  useIonViewWillLeave(onLeave);
};

export default useHideIonTabBar;

That can just be used like useHideIonTabBar() in a page component to hide the tab bar

Answer 4

There is a simple way to implement that - moving the route you wish to hide the tab-bar to the tabs module, outside of tabs children routes.

Let's say you have a "events" module and this route is defined on its own routing module:

{
  path: ':id',
  component: SomeInfoPage,
  canActivate: [AuthGuard],
}

Moving this route to tabs routing module will hide tab-bar from the page.

{
  path: '',
  component: TabsPage,
  children: [
    {
      path: 'events',
      children: [
        {
          path: '',
          loadChildren: () => import('../events/events.module').then((m) => m.EventsModule),
        },
      ],
    },
  ],
}
{
  path: 'events/:id', (or 'tabs/events/:id')
  component: SomeInfoPage,
  canActivate: [AuthGuard],
}