Skip to main content

How to Handle Hardware Back Button In Ionic 3

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this tutorial, we will take a look at how you can handle hardware back button in your app build with Ionic.

We will take a look at how you can add page specific hardware back button actions. I have a detailed post showing you how you can navigate between pages in Ionic. In this tutorial, we will build upon that post, so I will not be going into details about navigating between pages in this post. The focus will be on handling the back button.

A thing to note is that the back button is an Android-only thing. iOS does not have a back button and the code that we will use will not fire in iOS.

Step 1)

We will start by creating a new ionic project. We do that by running the following command in terminal/command prompt.

Step 2)

Now, we will be creating a new page, you can read more about creating pages in my other tutorial on How to create Pages in Ionic 2

To create a new page in Ionic 2 issue the following command.

Step 3)

In the home.html page, we will create a button that will call a function which will navigate us to the second page.

 

Step 4)

Now it’s time to code up the navigation function. We will also, code our back button action for the home page as well. We will code src\pages\home\home.ts file as follows.

We are navigating to the secondPage by doing this.navCtrl.push(SecondPage);. Note that we are importing platform  and then injecting it into the constructor.

Inside the constructor we are using platform.registerBackButtonAction() to bind to the back button event. This function will be called every time the back button is pressed. A thing to keep in mind is that registerBackButtonAction() is a platform level method. Meaning that it will be called even when you are not on the page.

To handle proper back button call we can pass a priority number as the second parameter to the platform.registerBackButtonAction() . We are passing the priority number 1 the default priority is 0.

Step 5)

Now, let’s code the secondPage and take a look at how you can handle back button event on that page. The HTML of the second page is of no use to us so we will leave it as the default which was generated by the CLI. We will code the second.ts file as follows

Here we are doing similar things to what we did in the previous step. We are binding to the back button event using the platform.registerBackButtonAction() function in the constructor. But, note that we are storing the return of the platform.registerBackButtonAction() inside a temporary variable backAction.

platform.registerBackButtonAction() function returns another function which we have stored in backAction. On calling this function we can unregister this back button event. We are unregistering after this.navCtrl.pop().

Note that the priority number here is 2 which is higher than that of the previous one. If the priority number was lower we would still be executing the previously registered back action.

As we are now unregistered from the back button event on the secondPage,  if we press the back button now, the back action that was registered in the homePage will be executed. We are just logging console.log("backPressed 1"); when the back button is pressed. This means that our app will no longer exit when we are on the homePage as we are handling the back button.

 

Conclusion

Registering back button action for any Ionic app is simple. Also, you can unregister a back button action by simply calling the return function as we saw. But, keep in mind that registering back button is a global app-level thing. Just because you register a back button action on page one does not mean that it will execute only when page one is the active page. You have to have correct priority numbers to get the desired back button action.

 

Download Code:


Code Will Be Sent Via Email

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

 

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

%d bloggers like this: