Ionic 2 - Disabling back button for a specific view

Question

So I\'m messing around a bit with Ionic 2, and I want to know how to disable the back button for a specific view.

What I\'m doing is this.nav.

Answer 1

Option 1

Hide it in the view by adding the hideBackButton attribute to the ion-navbar component

<ion-navbar hideBackButton="true">
    <ion-title>Sub Page</ion-title>
</ion-navbar>

Option 2

Hide it from within the page class by using the .showBackButton(bool) method provided by the ViewController class

import { NavController, ViewController } from 'ionic-angular';

export class SubPage {

    constructor(public navCtrl: NavController, private viewCtrl: ViewController) { }

    ionViewWillEnter() {
        this.viewCtrl.showBackButton(false);
    }

}

A comment from the Ionic docs

Be sure to call this after ionViewWillEnter to make sure the DOM has been rendered.

Note

I'd just like to add that these options don't take into account when the hardware back button is pressed. The hardware back button is still likely to cause the active page to pop from the nav stack.

Answer 2

In order to prevent hideBackButton to hide your menu icon, use this css in your app.scss:

ion-navbar[hidebackbutton] button[menutoggle] {
  display: block !important;
}

or in case you want somewhere to be shown and somewhere not, change your selector as follow: ion-navbar[hidebackbutton].show-menu button[menutoggle]

Answer 3

You can navigate to the page as a modal:

let modal = Modal.create(SomePage, navParams);
modal.onDismiss(datos => { 
//dissmiss callback 
});  
this.nav.present(modal );

Answer 4

Ionic2 hides the menu button, if you are not on the root page and shows the back button.

As you said, the animation is missing with:

this.view.setRoot(SomePage);

Write this for an animation with "back" or "forward":

this.nav.setRoot(SomePage, {}, {animate: true, direction: "forward"});

---

Okay, what if I need the default animation which is provided and is not "forward" or "back"?

There are some ways:

1. This will provide the default animation

In your current Page, write:

this.nav.insert(0, SomePage).then(() => {
    this.nav.popToRoot();
});

---

2. Don't set it as root for whatever reason

this.view.push(SomePage);

Okay fine, now we need to take care of a view things.

1. part: Hide the back button
2. part: Because the page is not the root anymore we need to show the normal menu icon again (otherwise there wouldn't be any icon at all after just hiding the back button).

Notice the menuIsHidden property.

export class SomePage {
    // Part 2:
    menuIsHidden: boolean = false;

    constructor(private nav: NavController, private view: ViewController) {}

    // ionic2 will call this automatically
    ionViewWillEnter() {
        // Part 1:
        this.view.showBackButton(false);
    }
}

somePage.html

<ion-header>
 <ion-navbar>
    <button menuToggle [hidden]="menuIsHidden">
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title></ion-title>
  </ion-navbar>
</ion-header>

I hope this will help someone.

Answer 5

You can use the following Property Decorator in Ionic 2.0.0-rc.6

  <ion-header>
    <ion-navbar hideBackButton="true">
      <ion-title>
        Your page title
      </ion-title>
    </ion-navbar>
  </ion-header>

Docs reference