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

Ionic Framework ionic-v3
1

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.

2 
<ion-navbar hideBackButton *navbar>< /ion-navbar>

I’m not sure if this stops the use of Android’s hardware back button.

3

I do the same in my login page, i couldn’t remove the nav bar for that one since that breaks the tab name in browser and probably too in mobile when seeing opened apps.

I made a hidden class and applied it to the nav bar just in login page.

.hidden {

  display: none!important;
}

// login.js

<ion-navbar primary *navbar class='hidden'>
  <ion-title>TAO Login</ion-title>
</ion-navbar>
1 Like
4

Hey guys, Max here!

I played around with it, because i had the same issue and saw there was no answer and i think i came up with one.

In your login.js file or whatever your file name is, you need to have a function for the button that will change the root and not just push a new view on top of it.

//GoToTabs is my function name goToTabs(){ //Here is all you need, we just set the root for our app.html file to this file so it becomes the main source this.nav.setRoot(HelloIonicPage); }

Sorry if this is confusing to anyone, im still a beginner myself just wanted to share a quick fix with my fellow developers. Happy Building!

2 Likes
5

Humm what does this have to do with the subject of this topic?

6

it gets rid of the back button on the navbar if you are coming from a another page, like a sign in page for example.

7

The issue here is that the topic creator wants to hide the whole navbar without loosing the tab name when in browser (i think) not just the back button.

1 Like
8

Sorry for the late replay. But it seems that set “display:none” in ion-navbar not work in this cas.
It will appears an blank after add the “display:none” style.

When i inspect that region i found that the “ion-navbar-section” is the node that occupy that place.

image

But when i force set “display:none” in the “ion-navbar-section” , it will effect on every tab and it’s subpage.

9

Is your nav bar in the app.html or do you have one for each page? i have one for each page so i can isolate the one that i want to hide the navbar.

11

I am having the same issue. Did you find a solution?

12

I used the state change event (may be different term) to hide the tabs bar. And hope you can do the same thing for your nav-bar also.

    $scope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams) {
        try{
            if (toState.name=='home.delivery-detail' || toState.name=='home.collection-detail') {
                vm.lHideTabs = true;
            }
            else {
                vm.lHideTabs = false;
            }                
        }
        catch(e){
            $ionicPopup.alert({
                title:'Error: $scope.$on',
                template:e.message
            });
        }

    });

image
Ionic_Hide_TabsBar.png929×445 23.5 KB

13

Sorry for the late. I got a solution in @luchillo17 .
The solution is that just let each page have it’s own nav-bar :
Use

<ion-navbar ></ion-navbar> in every page instead of using *navbar

Then, when you want to hide one of the navbar, just set style="display:none" on that navbar or use *ngIf

1 Like
14

But this way will add a black bar at the top of the nav bar tho…

15

//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”;
}

16

Has anybody found a better way to hide the nav-bar on certain tabs, but not all? Seems like a bit of a hack to me.