Handling back button for NavBar?


#1

Hi guys,

I’ve been trying to introduce a “Are you sure you want to exit” feature on a certain page in my app. However, I’ve been trying to use “platform.registerBackButtonAction” which doesn’t appear to fire at all when using the back button on the NavBar. Is there another way to handle this certain back button? Or will I have to get rid of it?


#2

you may get your answer here :wink:


#3

See: https://ionicframework.com/docs/api/navigation/NavController/

Lifecycle events

Lifecycle events are fired during various stages of navigation. They can be defined in any component type which is pushed/popped from a NavController.

And:


#4

Hi,

That does work fine for the hardware button. I’m concerned about the back button that appears on the navbar however. This isn’t fired when I press that


#5

See: https://ionicframework.com/docs/api/platform/Platform/

The back button event is triggered when the user presses the native platform’s back button, also referred to as the “hardware” back button. This event is only used within Cordova apps running on Android and Windows platforms. This event is not fired on iOS since iOS doesn’t come with a hardware back button in the same sense an Android or Windows device does.


#6

See: https://hackernoon.com/handling-android-back-button-in-ionic-33f7cfbba4b9


#7

Consider hiding the navbar back button if the platform is Android. You can do so by getting a reference to it in your pages with something like

@ViewChild(Navbar) navbar: Navbar;

And

if (this.platform.is('android')) {
    this.navbar.hideBackButton = true;
  }

Personally, since I switched over to Android I gave up using or expecting to use a navbar.backButton cold turkey. Hiding it might save you some unnecessary frustration.


#8

You may use ViewController , this.viewController.setBackButton(false) in ionViewWillEnter() , then put your own back button and control it


#9

As in, that will hide the default button?


#10

Ya. n sry the function is this.viewController.showBackButton(false) ,put this in ionViewWillEnter() .

then in html inside use button with back icon and handle it.


#11

No problem at all. Thanks for the info, it’s more convenient than my solution.