Ionic v4 - check if modal is opened

Question

Basically I have welcome page with 2 buttons; login and register. When the user clicks “register” button a modal opens up showing the registration form. I implemented a logic to login the user upon registration and theres also a logic that takes the user to the home page when he/she is authenticated.

What this means is that when the user submit the registration form and log in, the modal has to be dismissed, but only after the home page is being displayed. Otherwise if I close the modal before that then the user is going to see the welcome screen again, and I would like to avoid that behavior. I could easily dismiss the modal upon registration but as I said, I don't want the user to see the welcome screen again.

This is how I open the modal in welcome.ts

async showModal() {
    const modal = await this.modalController.create({
      component: RegisterPage
    });
    return modal.present();
  }

In register.ts, I need a way to know if the modal is still opened so I can use the following logic:

constructor(
    private modalController: ModalController,
    private router: Router
  ) {
    this.router.events.subscribe(() => {
      if (router.url.toString() === "/tabs/home" && isModalOpened) this.modalController.dismiss();
    });
  }

If I only add this to my if statement router.url.toString() === "/tabs/home" it works, but if the user from the welcome screen opens the modal (by pressing the register button) and closes it w/o submitting the register form, go back to the welcome screen, press the login button and log in, then I will get an error:

Error: Uncaught (in promise): overlay does not exist

And of course this happens because I am dismissing the modal when I am the the home page, w/o checking if the modal is opened.

Any help is greatly appreciated, I’ve been stuck with this for a while now…

Answer 1

You can call the this.modalCtrl.getTop(); function. If it is undefined, it means the component was not called through a Modal Controller instance. You can refactor your code like:

constructor(
    private modalController: ModalController,
    private router: Router
  ) {
    this.router.events.subscribe(async () => {
      const isModalOpened = await this.modalController.getTop();
      if (router.url.toString() === "/tabs/home" && isModalOpened) this.modalController.dismiss();
    });
  }