Dismiss all overlay components

Ionic Framework ionic-v3
1

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:

this.appCtrl.getRootNav().dismissOverlays();

2

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

3

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…

4

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.

5

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.

6

Hello. Can you please give code sample of how to implement this. I’m in the same boat.

Is it something like this:


//modal page
this.events.subscribe('alreadyloaded', (l)=>{
     this.viewCtrl.dismiss();
    });

//Origin page
this.events.publish('alreadyloaded', true);
7

Yes, exactly.
I use a convenience method that I have in my utils class:

  closeAllModals(){
    this.events.publish('modals:close');
  }

The big benefit of using event for closing modals is that you can publish the event from anywhere, any class, any context, and the subscribed modal will catch it.

For the sake of completeness, the exact code I used for subscribing to the event is:

    this.events.subscribe('modals:close', () => {
      this.dismiss();
    })

in my modal page. I don’t remember why I didn’t have to go through the viewController to dismiss it, you’d probably find that in API reference.

8

is it working?
I thought it will work in ionic 4, because it seem quite accurate, but not working in ionic 4

 this.events.subscribe("modals:close", () => {
      console.log("On nootufy 2");
      this.modalCtrl.dismiss();
    });

console.log – is logging when I am publishing the event but the modal popup is not closing.

9

I am seeing the same thing as Thesurya9
In the subscribe callback this.modalctrl.dismiss() is not dismissing the modal.

"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@ionic/angular": "^4.4.0",
10

The solution is to call the modalController dismiss function after onDidDismiss promise resolves on the calling page! This works.

2 Likes
11

Ok so I had the same issue and I solved it this way. The solution is to store all the modal instances using a service in an array. Then use a loop and dismiss all the modals refering them from that array.

modal.html

    <ion-button (click)="openModal()"> Open Modal <ion-button>
    <ion-button (click)="close()"> Close Modals <ion-button>

modal.service.ts

modalInst=[];
i=0;

storeModal(x)
{
       this.modalInst[this.i]=x;
       this.i++;
}

modal.ts

openModal()
{
    var modal = await this.viewCtrl.create({
    component: ModalPage
   });

 this.service.storeModal(modal);// storing modal instances in an array
   return await modal.present();
}

close()
    {
        for(var i=0; i< this.service.modalInst.length; i++)
         {
            this.service.modalInst[i].dismiss();
         }
    }
1 Like
12

This (@ChetanRaj0428’s) would be my go-to solution for ionic > 3 if I ever needed this again.