Dismiss all overlay components


I am building an Ionic 2 app using ngrx, but I have a problem in dismissing overlay components.

To login I show the user a modal with a login-form. This dispatches an action which is handled not in the page but somewhere else. If the login was successful I want to set a new root-page and dismiss all overlay components (in this case the modal). This cannot be done from within the modal component since all the logic is handled somewhere else.

I already tried: clearing the whole navigation stack, calling popToRoot() and some other things but nothing worked. The is not dismissed.

Is there a way to dismiss all the modals/page except the root-page? I would want to have something like this:



Did you get solution for this. I have the same problem. Modal popup, ionic select-options modal are not dismissing when device screen lock


I am currently using the following workaround:

private dismissAllPages(){
if(this.appCtrl.getActiveNav() && this.appCtrl.getActiveNav().length() > 0 ){
return this.appCtrl.getActiveNav().popToRoot();

But sometimes, in dev mode, I get an exception, so it is not optimal…


Create a service that you inject in all of the classes that use the modals. Use the service to display modals and push into an array. Use the service to iterate through the array to dismiss all modals that were created.


I had the same problem and solved it using Events.

On the login modal, you subscribe to an event, for example “modals:close”, on which you call this.dismiss().

On the page where you navigate to from the modal, you just fire the event.