Vivek Kannan
Vivek Kannan

Reputation: 143

Showing the Menu bar in ionic 2

In Ionic 2, I want to hide the back button and need to show the menu bar. So, I have written the following code:

<ion-navbar hideBackButton="true">
  <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-title><b>Board</b> Bullets</ion-title>
  <button class="pull-right" ion-button clear>
    <i class="icon dripicons-dots-3 r_90 submenu"></i>
  </button>
</ion-navbar>

But, what's happening is the it hides both the back button and menu bar. Can anyone tell me how to hide the back button only?

Upvotes: 1

Views: 812

Answers (2)

Sagar Kulkarni
Sagar Kulkarni

Reputation: 2081

I think you should read Navigation documentation of Ionic 2. Here is a good start.

Basically, when you use this.navCtrl.push(Page), Page is pushed to the navigation stack. When you use this.navCtrl.setRoot(Page), Page is set to the root of navigation stack.

If you do not wish to go on back page (not even from hardware back button), you can use this.navCtrl.setRoot(Page) to set the page at the root. Here, you will have your menu button instead of back button.

Upvotes: 1

Fernando Del Olmo
Fernando Del Olmo

Reputation: 1450

All you need to know its how ionic 2 navigate to debug your error. Pay attention:

If you have a root page A and you navigate with push into page B, in page B you will have a back button. In page B if you navigate back with pop, in page A will have the menu button.

But if you are in page A and navigate with setRoot to page B, in page B you will have again the menu button.

And other thing to keep in mind its that ionic navigation works like a stash of views.

So the back button will appear only if you have some view in the stack to navigate, if there isn't a view, it means is a root view, the menu button will appears.

If you need to hide the backbutton keep this in mind and reorganize your navigation, maybe helps you and wont have to add extra logic, just navigation.

Upvotes: 0

Related Questions