How to hide nav-bar with tabs in Ionic 2?

Question

How to hide nav-bar with tabs in Ionic 2?

I only want to hide it in one of the pages excluding others.

<ion-navbar *navbar   >
  <ion-title>Item Details</ion-title>
</ion-navbar>

I have tried hide-nav-bar="true" but it does not work.

Answer 1

From a tab page you can do:

this.nav.parent.parent.setRoot(LoginPage);

Before:

Nav -> Tabs -> somepage

After:

Nav -> LoginPage

Nav is the root of all nav stacks in Ionic 2

Also, a modal works well for a situation where you want to show a list item's detail in a new view without navigation tabs or a nav bar taking up valuable screen space.

Currently I don't think there is a way to hide tabs when on the child view of the tabs page other than using CSS. If you decide to go with the CSS option then I would suggest using Angular's ngClass attribute https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html to set a class than will hide the nav tabs or nav bar.

Answer 2

Another method is to do it with css. You can add the following code on your constructor

 tabBarElement: any;

  constructor(
    public navCtrl: NavController) {

    if (document.querySelector('.tabbar')) {
      this.tabBarElement = document.querySelector('.tabbar.show-tabbar');
    }


  }

  ionViewWillEnter() {
    if (this.tabBarElement) {
      this.tabBarElement.style.display = 'none';
    }

  }

  ionViewWillLeave() {
    if (this.tabBarElement) {
      this.tabBarElement.style.display = 'flex';
    }

  }