Handle back button with modal

Ionic Framework ionic-v3
1

Trying to bring a global way (app.component) to handle the back button.

I was doing good looking at the nav.length to see if they are on some pushed sub page. I just pop it off.

We have multiple pages that we have setup as root (so we could get the menu to show up).
On some root pages we do a modal. I’m not sure how to tell if the back button should close the modal, or take you back to a home screen.

2

Listening to the way you describe the problem leads me to believing that this is something that should not be made global. The app component shouldn’t know all of those details, because every time you change or add a new one, somebody has to remember to go back and mess with the app component, potentially breaking another part of the app. Very conducive to bug creation.

What I would do instead is to use lifecycle events to register and deregister local back button actions on each page; that way responsibility is clearly delineated.

3

For single page apps Navigation is a global thing. Each page doesn’t have its own navigation.

This all works fine and can handle the back button with this.platform.registerBackButtonAction()

The problem is a modal still uses the hardware back button to close itself, but its not really part of the navigation.

A root page the navigation stack is 1. Figure where the hardware back button should go.
From a root menu to a pushed page, the stack is 2. Easy to pop this off the stack.
A root page that goes to a model, the stack is still 1 (and I can see that).

4

I’m not sure if you’re asking about a single page app or multi-page based on your 2 posts?
Either way, setting a boolean to true or false depending on whether or not a model is open is a simple approach.

if (this.modalPresent) {
    this.viewCtrl.dismiss().then(() => this.modalPresent = false);
 } else {
    this.navCtrl.setRoot(HomePage);
 }

As @rapropos said, register on viewDidLoad or viewDidEnter and unregister on viewDidLeave / viewDidUnload

5

I thought ionic does just single page apps. Or more Angular does.

In the app.component.ts we setup the Nav and menu values.

@ViewChild(Nav) nav: Nav;

Nav is really global.

Different types of pages.
Rootpage (ionic puts a menu in the nav bar)

A new pushed page. (Ionic puts a back button in the nav bar).

Or a Modal which overlays the current page. (I guess from the NavControler point of view nothing has changed).

But all of these use the hardware back button.
From a modal, dismiss.
From pushed page, pop.
From root page close app.

From the document about modal its kind of hard to understand how modal and navControler work.

A modal uses the NavController to present itself in the root nav stack. It is added to the stack similar to how NavController.push works.

Does that mean a Modal is a root page or a pushed page?

All I know is that if I am on a root page, I do a modal the this.nav.getActive as the root component value. The this.nava.length is still 1.

I get the viewDidLoad and videDidEnter. It seems like that means you would have set the back button up on every page.

You entered page one, register back button function, you leave page one set the back button back to default behavior. Page 2 doe the same thing again?

6

You are correct, Ionic does SPA’s only. Sorry to have confused the issue, I was responding to you and thinking of a different post.

Yep. Many people seem to find that counter intuitive but imo it’s best to take a hands off approach to each component/view. Each should keep their hands off the others. That way it’s clear which is responsible for what is and is not working.

Think of a modal as a view instead of a page

7

No, page 2 will revert to default back button behavior. Will either pop back in navigation or close the app (if you’re setting page 2 as root, closing the app seems to be the default)

8

After we changes to only having only one root page. The only thing that I needed to handle was when you were on the root page instead of closing out the app, to log the person out.

We have this code

ionViewWillEnter() {
this.handleBackButton = this.platform.registerBackButtonAction(() => {
logout();
},1);
}

Originally had the priority of this set to 100, changed it to 1. The problem is on this page, we have a modal come up. But if I hit the back button when the modal is up, this logout code is called.

Tried changing the priorty to 1, that also didn’t work. Seems like this platform.registerBackButtonAction will take over the modal code.

Right?

I have to add the back button on the second page. (and make the priority higher).