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