Skip to main content

Ionic Back Button Confirm Before Exit

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 to implement confirm before exit using the hardware back button. This only works with Android as iOS has not concept of back button.

Step 1)

We will start off by creating a new Ionic app. We do that by running the following command.

We are using the tabs template here. You can choose to use any other template that you want.

Step 2)

As we want to handle the exit event of the app. We will bind to the back button action as soon as the app load. To do that, we will need to code the app.component.ts file. So open up src/app/app.component.ts and code it as follows.

Let’s understand what we are doing in the above code.

First, we are importing the AlertController and injecting it inside the constructor. We will be using it to prompt the user. Inside the constructor, we are binding to the back button event inside the platform.ready() method as shown below.

It is important to note that we are registering a back button action inside the paltform.ready(). In the platform.registerBackButtonAction() method, we are calling the presentConfirm() function which will present the AlertController. We are showing the AlertController only if alertShown is set to false. We are doing this to prevent showing multiple AlertControllers at one time. Now, even if the user presses the back button more that once only once prompt will be displayed.

Note here that we are passing 0 the priority number inside the platform.registerBackButtonAction(). Keep in mind that if you register a back button action again somewhere else in your app with the same priority number then that function will execute and will override this one.

So all other back button actions should be registered with priority number greater than 0.To know more about back button action read my previous post on How to Handle Hardware Back Button In Ionic.

 

The presentConfirm() function will present our alert controller with two buttons namely Cancel and Yes. We are coding the buttons so that when the Yes button is clicked the app will exit. We are doing this inside the alert controller in the buttons array as shown below.

As you can see the handler method of the Yes button will exit the app by executing this.platform.exitApp(). Also, note that we are setting the alertShown to false in the handler of Cancel.

 

Conclusion

Promting the user before exiting the app is a great way to prevent accidental exits. As I already mentioned, that care has to be taken while handling back button actions elsewhere. Make sure that back button actions are not registerd with the same priority number. You can read my previous post on How to Handle Hardware Back Button In Ionic  for more in-depth look on hardware back button.

 

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. :-)

  • Pingback: Ionic Double Tap Back Button To Exit - pointDeveloper.com()

  • Muchamad Buchori

    Your tutorial’s helpful for me, but when I press back button in another page (contact or about) give me prompt to exit, how to disable it? I want exit confirm just appear in homepage, thankyou, Im sorry for bad english

%d bloggers like this: