Open dialogs/modals

Ionic Framework ionic-v3
1

Does anyone know how (in app.component) I am able to tell if any dialog/modals are currently open (for example if the user has clicked on a select field and the options are being displayed) ?

I have a user time-out event that occurs when the app has been left idle for 5 minutes. When that occurs (in app.compinent) I want to clear any open dialogs/modals).

I thought doing a popToRoot on the nav stack would clear them but it doesn’t. How do I get a handle on any open modals?

2 
this.app.getRootNav().setRoot('YourPage');

should reset the main nav to page you want aka close your modals. could you give a try?

1 Like
3

Thanks - but that didn’t seem to work - the dialog stays open.

4

You could create a ModalPresenterService. If a page wants to present a modal, it passes a Modal to the service, and the service keeps track of which modals are open (with a Set<Modal> or whatever, I don’t know what it means to have more than one open at once, never tried it myself). Then you could have a “close all” function that calls the dismiss function of each Modal in your collection of open modals.

5

thanks @AaronSterling what about the use-case when the user has clicked on an ion-select element and the selection dialog appears? I only have a couple of modals in the app but I have ion-selects all over the place - presumably that would mean using this sort of service and tracking open and close with onFocus events etc?

6

How do you open/call your modal?

I use the code I posted to redirect to my login page with an http interceptor and seems to work for me :frowning:️

1 Like
7

I don’t know. A Modal is an Overlay, not a page, which might be why the standard “close all pages” things aren’t working. I’d have to look at the ion-select code to see more, and I don’t know if it would help, because almost all components have been rewritten for ionic 4. Honestly, if it were up to me, I’d just try it out. One page, one provider, pass a Modal with an ion-select, see what happens. Then try it again with Ionic 4, or freeze your updates to 3.x.

8

@reedrichards my test-case is not actually a modal - it’s a dialog that’s open via the user clicking on an ion-select item

9

You could keep a collection of Select objects, and call close() on them when you need to. I imagine that would stay the same in Ionic 4 - breaking change otherwise that should be announced somewhere.

1 Like
10

Ok, thanks. I will need to have a think about it.

11

Actually one more thing occurs to me. The close() function is a Promise, not synchronous. Maybe you are rendering something before an “automatic” close is complete. So it might not be simple, sorry.

12

Ohhhh my bad now I understand…well then maybe the @AaronSterling is, as often, the way to go. Collect alerts in a service, on time-out, iterate on them and dismiss them…maybe?

13

Or really hard code a location.reload() or something else totally uncool at dom level using vanilla js potentially freaking angular and your cordova plugins (had an issue with sqlite with this). And use stored session data