Android hardware back button in ionic

I solved it for now. Read my quick blog post on it here:

http://www.codingandclimbing.co.uk/blog/ionic-2-android-back-button-13

Cheers.

1 Like

What is the expected due date for beta 3?

No set due date right now

Hi

I’m a tad confused, why is there documentation for this:
http://ionicframework.com/docs/api/service/$ionicPlatform/#onHardwareBackButton

Are you saying this will not work yet?

Thanks

@nebrekab So that doc that you have linked to is for Ionic V1. We’re talking about Ionic V2

Or you could watch for the document event for back button and use it as you need, for example here’s mine from the init() method in the app.ts file inside platform.ready().then(() => {...}):

// ------------ Double back button press to exit---------------
      document.addEventListener('backbutton', () => {
        if (this.nav.canGoBack()) {
          this.nav.pop()
          return;
        }
        if(!this.backPressed) {
          this.backPressed = true
          window.plugins.toast.show('Presiona el boton atras de nuevo para cerrar', 'short', 'bottom')
          setTimeout(() => this.backPressed = false, 2000)
          return;
        }
        // this.platform.exitApp()
        navigator.app.exitApp()
      }, false);
3 Likes

Ah! A subtle but important detail :slight_smile:
Thanks for the reply. I’ll keep an eye on this, for the time being @Daveshirman fix worked.

His fix relies on alert while mine in toast notifications, both are valid options, it depends how you want the back button to work.

Hi,
I have the same problem, i use ionic 2 beta 8 and here is my code:

this.platform.ready().then(() => {
       this.hideSplashScreen();
       this.platform.registerBackButtonAction(function(event){
         let nav=this.app.getComponent('nav');
         if (nav.canGoBack()) {nav.pop();}
         else {this.confirmExitApp(nav);}
       },101);
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
   
    });

i tried on real device and the hardware back is disabled, it does nothing.
Any help please. I googled a lot for any example of use of registerBackButtonAction in ionic 2 but no result

hey guzs i also get same issue??any solution came??

Hey, I just worked through a similar problem that someone posted on my blog. You can find my answer to his (her?) question here, and the code implemented in a project on my GitHub. Hope it helps.

i write below code for back button handle but nothing happend

platform.registerBackButtonAction(() => {
console.log(‘in app.ts’);
if(menu.isOpen())
{
menu.close();
}else
{
nav1.pop();
}
});

i write this in all page. is there any issue to write in all page?

HI,

I’m tring to override the backbutton with:

this.platform.registerBackButtonAction(this.goBack);

goBack() {
	this.app.getRootNav().setRoot(Main);
}

But I always get:
Uncaught TypeError: Cannot read property 'getRootNav' of undefined

Anyone has seen and solved this?

Thanks

Maybe the app isn’t yet ready? Does it help to test the platform first?

For the record, to override the back button I did the following, works fine for me:

 onPageWillEnter() {
      this.platform.ready().then(() => {
        this.unregisterCustomBackActionFunction = this.platform.registerBackButtonAction(() => {
              // The special stuff I want to do and where I want to go
       });
    });
 }

and then later, before leaving my view, to set back the back action to her default behavior

  this.unregisterCustomBackActionFunction();
2 Likes

Thanks,

But I already have this code inside

initializeApp() {
	this.platform.ready().then(() => {
		StatusBar.styleDefault();
		this.dbs.init({});

		this.platform.registerBackButtonAction(this.goBack);
        );
}
goBack() {
	this.nav.setRoot(Main);
}

Still same problem. The nav object is undefined

Do you have this code in the app.ts class? If yes, do you declare the nav within the constructor?

If yes and yes, try to declare it differently like

 @ViewChild(Nav) nav:Nav;

Hope it could help…

I have this code in the app.ts class and nav is declared like
@ViewChild(Nav) nav:Nav;

Very strange behaviour here…

:frowning:

I’m not a javascript/angular expert, but could that be a “method pointer” problem, does it work when you don’t call a method but access the nav directly in your function?

initializeApp() {
this.platform.ready().then(() => {
	StatusBar.styleDefault();
	this.dbs.init({});

             // Like this
	this.platform.registerBackButtonAction(() => {
                    this.nav.setRoot(Main);
            });
    );

}

2 Likes

So, when this back button functionality come?

Hi,

Is the back button functionality implemented in 2.1.1? Any links to get started? Thank you!

Fred