Ionic 2 - Disabling back button for a specific view

naiveai picture naiveai · May 18, 2016 · Viewed 54.4k times · Source

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.push(SomePage); It works, but the NavController automatically puts a back button there for me. How do I disable the back button?

NOTE: I do know that I can use this.nav.setRoot(SomePage) to set the SomePage as root and not have a back button, but that doesn't provide the useful animation that NavController automatically does.


EDIT: This question is somewhat old, but it has garnered some attention, so I think it would also be appropriate to mention for future reference that there's another reason you may not want to use this.nav.setRoot in order to push a page with no back button: it erases the preexisting stack of pages. So if you wanted to still be able to go back to the previous page in code without giving the user a UI way to do so, setRoot wouldn't allow you to do that.

Answer

Will.Harris picture Will.Harris · May 18, 2016

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.