Ionic Hide Tabs

Ionic Framework ionic-v3
64

Try this is a simple example …

Step 1)
The default app has three tabs in the tab bar by default, namely home, about and contact. Let’s say that we want to hide the tab bar when the user navigates to the about tab. For that, we will need to make changes to the about.ts file which you can find at

about.ts

export class AboutPage {
  tabBarElement: any;
  constructor(public navCtrl: NavController) {
    this.tabBarElement = document.querySelector('.tabbar.show-tabbar');
  }
 
  ionViewWillEnter() {
    this.tabBarElement.style.display = 'none';
  }
 
  ionViewWillLeave() {
    this.tabBarElement.style.display = 'flex';
  }

Step 2)
about.html

<ion-header>
  <ion-navbar>
       <ion-buttons left>
        <button ion-button icon-only (click)="takeMeBack()">
           <ion-icon name="arrow-back"></ion-icon>
       </button>
     </ion-buttons>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
  This is About Page Tab bar is Hidden.
</ion-content>

Step 3)
about.ts

 takeMeBack() {
    this.navCtrl.parent.select(0);
  }
3 Likes
65

Above your constructor, add the following line.

 @ViewChild(Tabs, { read: ElementRef }) tabs: ElementRef;

Then you can access the .tabbar element in the ngAfterViewInit life cycle hook.

ngAfterViewInit() {
     const tabbar = (this.tabs.nativeElement as HTMLElement).querySelector('.tabbar');
    if ( tabbar ) {
      // do stuff
    } 
}

Please don’t do this unless you really know what you’re doing. Because as soon as ionic changes the internal implementation, your code will break.

66

Thanks a lot! You have solved my problem with the easiest way :slight_smile:

67

Thanks! worked for me, but I had to change that to:

this.tabBarElement = document.getElementsByClassName('show-tabbar').item(0);

and the display value should be ‘flex’ when showing the tabs back

68

Nowadays :

IonicModule.forRoot(MyApp, {
  tabsHideOnSubPages: true
})
1 Like
69

Thank you :+1:
Thank you :+1:

70

Thank you that’s it!

71

how can we hide the tabs on our selected pages in ionic 3?

72

The right syntax is <ion-tab [show]="seeTabs"></ion-tab>

Hope it helps.

ionViewDidLoad() { this.seeTabs = false;}

1 Like
73

It worked for me, too. thank
ionic 3.6