Open a 2nd Modal and then close the 1st modal

Question

I have two Modals and the problem I'm having is with closing the 1st modal after 2nd modal has been opened.

I have tried this. But then it never opens the 2nd Modal.

This is within the 1st Modal

async next(): Promise<void> { // try to open 2nd Modal and after that close the 1st Modal
  await this.showSeeAgainModal();
  this.cancel();
}

cancel(): void {
  this.modalController.dismiss();
}

async showSeeAgainModal(): Promise<void> { // This is the 2nd Modal
  const modal: HTMLIonModalElement = await this.modalController.create({
    component: SeeAgainPage,
  });

  modal.onDidDismiss().then(async (res) => {
  });

  return await modal.present();
}

Update: I have tried with 2 ModalControllers. i.e. one for the parent and other for a child. But that too didn't work.

Answer 1

The problem is that you are calling this.modalController.dismiss(), which closes the active second modal. You need to have a reference to your first modal if you want to dismiss it from the second one. Pass a dismissFirstModal function as a componentProp to the second modal and take advantage of the ionModalDidPresent event, which is emitted after the modal has presented. Here is a working example

first.component.ts

constructor(public modalController: ModalController){}

async presentFirstModal() {
  const dismissFirstModal = () => {
    modal.dismiss();
  };
  const modal = await this.modalController.create({
    component: SecondComponent,
    componentProps: {dismissFirstModal: dismissFirstModal}
  });
  return await modal.present();
}

second.component.ts

@Input() dismissFirstModal;

constructor(public modalController: ModalController){}
ngOnInit() {}

async showSeeAgainModal(): Promise<void> {
  const modal = await this.modalController.create({
    component: SeeAgainPage,
  });

  modal.addEventListener('ionModalDidPresent', () => {
    this.dismissFirstModal()
  })

  return modal.present();
}