feat: reusable modals

[NiklasMerz]

Bug Report

Ionic version:

[x] 4.x

Current behavior:
Modals that are dismissed cannot be opened again. You need to create a new modal object before presenting. Modals cannot be reused.

Expected behavior:
In Ionic 3 I could create a modal and open and close it as much as I want to. I think reusing modal objects should be possible

Steps to reproduce:
See my repro project here. Open the modal by clicking open, dismiss it, click open again.

You can see that the browser console prints the log message from the modals onInit lifecycle hook but does not show the modals template.

Related code:

https://github.com/NiklasMerz/ionic-modal-repro

A sample application via GitHub

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.15 (/Users/niklasmerz/.nvm/versions/node/v12.14.1/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.11.8
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.2

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   NodeJS : v12.14.1 (/Users/niklasmerz/.nvm/versions/node/v12.14.1/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina

[NikolaPeevski]

This is not really a bug but more like a feature request ?

[NiklasMerz]

Could be. But it looks like a bug/regression, breaking change, because it worked like that in Ionic 3 and our application broke after migrating to Ionic 4.

[liamdebeasi]

Thanks for the issue. Can you provide some more clarification around your use case? Even in Ionic 3 modal components were not intended to be reusable. See the v3 docs here: https://ionicframework.com/docs/v3/api/components/modal/ModalController/#modal-controller

[NiklasMerz]

Thanks I could not find the information that the modal controller object cannot be reused. But anyway I restructured the app logic to create a new page every time.

We use a modal that opens every time the app resumes and the ondiddismiss should be called every time. So we resused the the modal and did not need to attache the callback again.

[dalepo]

If you change modals back then all modals relying on ngOnInit / ngOnDestroy will break.

[liamdebeasi]

Thanks for the issue. This has been resolved via #23341, and you will be able to reuse modal instances by writing them declaratively in Ionic Framework v6. We will have updated docs that show you how to do this.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.