3

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>
Owen Kelvin
  • 14,054
  • 10
  • 41
  • 74
Aasif Khan
  • 35
  • 1
  • 6

4 Answers4

6

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>
ruth
  • 29,535
  • 4
  • 30
  • 57
  • 2
    No! its not working my page is blank after specify the router in if condition @michael – Aasif Khan Oct 23 '20 at 06:43
  • What do you mean router in if condition? The if condition is in the router, not the other way around. And you still haven't cleared what do you mean by "pages". Do you mean specific routes? – ruth Oct 23 '20 at 06:50
  • when i click on any tab button for example profile button so whatever content i have designed that is my profile page and in the profile page there is one button i defined as settings so when i click settings the settings page will be shown, so i want to hide my ion-tab in my setting page. if (event['url'] === '/settings') and this is about router in if condition @michael – Aasif Khan Oct 23 '20 at 07:01
  • There is a typo in `takeUntil(ths.closed$)`. It should be `takeUntil(this.closed$)`. I've edited the answer. Was that your issue? – ruth Oct 23 '20 at 07:07
  • Also note the condition `event['url'] === '/settings'` will only work if it didn't take any parameters like `/settings/someParam`. In that case, you could check only if the `settings` string is present in the route with `event['url'].indexOf('settings') !== -1` instead. – ruth Oct 23 '20 at 07:11
  • no i had made the changes when you provided me **takeUntil(ths.closed$)**. but my whole page is hidden its showing white screen – Aasif Khan Oct 23 '20 at 07:12
  • im not passing parameter @michael – Aasif Khan Oct 23 '20 at 07:19
  • In that case it appears to be an Ionic specific issue. It seems to work in a plain Angular app: https://stackblitz.com/edit/angular-route-navigation-optionalparams-hyljj9?file=src/app/app.component.ts – ruth Oct 23 '20 at 07:31
  • ion-tab-bar should be hidden instead of app-tab or ion-tabs. hiding these two tags will make whole new page blank in ionic 5. Also in subscribe add on if (event['url'] === '/somePage') add else condition this.showTabs = true; to show tabs on all other pages. – playerone Nov 29 '22 at 10:48
1

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

Lindstrom
  • 795
  • 1
  • 5
  • 10
1

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],
}
mellunar
  • 104
  • 2
  • 8
0

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>
Oben Desmond
  • 1