Button in navigation bar

Ionic Framework ionic-v3
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.

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>
2 Likes
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?