CODEWITHSUNDEEP
angularionic4
Gilbert R.
Gilbert R.

Reputation: 292

Ionic v4 - check if modal is opened

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…

Upvotes: 5

Views: 10925

Answers (2)

Ahmed Ogela
Ahmed Ogela

Reputation: 11

You can use it like this way;

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

and check any where 

if (this.modal) {
  this.modalController.dismiss();
}

you should clear its value after dismiss() if your case needs that.

Upvotes: 0

Tomás Larrain
Tomás Larrain

Reputation: 101

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();
    });
  }

Upvotes: 10

Related Questions