CODEWITHSUNDEEP
angularionic2tabsionic3navbar
Kim Wong
Kim Wong

Reputation: 2137

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

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.

Upvotes: 4

Views: 6597

Answers (5)

Spartak Lalaj
Spartak Lalaj

Reputation: 429

A bit late to the party, however, this worked for me:

page-<page-name> ion-navbar {
  display: none !important;
}

This hides it only for a given page, no white-space or margin problems.

Upvotes: 0

Jack Vial
Jack Vial

Reputation: 2474

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.

Upvotes: 6

LeRoy
LeRoy

Reputation: 4436

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';
    }

  }

Upvotes: 1

wdickerson
wdickerson

Reputation: 869

Here is a workaround that hides the nav-bar:

//hide nav bar when we enter the page
    onPageWillEnter() {
        document.getElementsByTagName("ion-navbar-section")[0].style.display = "none";
    }

//show nav bar when we leave the page
    onPageDidLeave() {
        document.getElementsByTagName("ion-navbar-section")[0].style.display = "block";
    }

Credit to marcus-robinson from here: https://github.com/driftyco/ionic/issues/5556

Upvotes: 0

Ghayyas Mubashir
Ghayyas Mubashir

Reputation: 138

Hi Ionic2 has Create Hide Back Button you can try this. Code is Given Below

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

Upvotes: 0

Related Questions