Button in navigation bar


#1

I can’t find any document for this and the ionic 1 way doesn’t work. I have two questions:

  1. How to hide the back button?
  2. How to add a button in right side of navigation bar?

Thanks.


Remove back button
#2

@zhouhaowowtv

didn’t get your first question

Second Ans

<ion-nav-bar>
  <ion-nav-buttons side="left">  
    <button class="button button-icon button-clear icon ion-edit" style="position:absolute; right: 20px; font-size:17px;"></button>        
  </ion-nav-buttons>
</ion-nav-bar>

#3

Actually my page is not the root page. So there will be a back button. But because my root page is Login Page and I don’t want to return to that page after logged in. That’s why I want to hide back button.

Unfortunately you code doesn’t work for me. I tried both “left” and “right”.


#4

could you provide a codepen ??


#5

No idea how to create a codepen for ionic 2? Sorry. And there is no better way to post source code here because of the format problem. Maybe I should post my question to StackOverflow. Thanks anyway.


#6

You can easily disable the back button, which won’t show it actually.

when you change state you can simply do :

$ionicHistory.nextViewOptions({
  disableBack : true
});
$state.go('app.yourState');

hope it solves for you


#7

But this code is from Ionic 1, right? I’m in Ionic 2. How to do the same thing?


#8

Oh sorry, didn’t notice the tag, I’m not much into Ionic 2 yet. Sorry and good luck


#9

answer 1

you can put hideBackbutton on ion-navbar

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

answer 2

put end directive on button tag

<ion-navbar>
  <button end>myBtn</button>
</ion-navbar>

#10

What if you set next page after the Login Page as the root? Resets the navigation stack.

openPage(page) {
     // Reset the content nav to have just this page
     // we wouldn"t want the back button to show in this scenario
    let nav = this.app.getComponent("nav");
    // Set HomePage as root after logging a user in.
    nav.setRoot(HomePage);
}

Back button should not appear in the navbar since HomePage is now the root.

Also to place a button the right side you need to follow the example below (I think):

<ion-navbar *navbar>
  <ion-title>
    <ion-icon name="{{page.icon}}"></ion-icon>
    {{page.title}}
  </ion-title>
  <ion-buttons end (click)="openMenu()">
    <button>
      <ion-icon name="menu"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

I hope this helps!


#11

Thanks. It works. So it means there is no way to hide back button unless you set the current page to the root of the navigation stack.


#12

As @developerAndre noted above you can use hideBackButton in your ion-navbar element.

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

I’m not sure if this stops the use of Android’s hardward back button. So, setting the page as root will stop users from going back to the login page.


#13

hideBackButton Works.

Is there a way I can hide it on Android and show it on IOS?

As IOS does not have hardware back buttons as android.


#14

How to place buttons on both sides?


#15
  1. To hide the Back button set hideBackButton in ion-navbar.

  2. To show the menu when back button is hidden Set Persistent=‘true’ in the ion-menu tag.


#16

where is this in documentation?