feat: declarative ion-modal (angular)

[evgeniyefimov]

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

Make an option to open a modal window in template. It will allow devs to work with modals in a reactive way, Ionic for React is already working like this. Right now modal can be opened only programmatically with modal controller, it makes inconvenient to controlling modal state in reactive angular applications and reacting on data changes with OnPush. Also there is no way to pass template to the modal controller, only component's class.

Describe Preferred Solution

Would be great if we will be able to do things like this:

<ion-content>
      <ion-modal [isOpen]=showModal>
        <p>This is modal content</p>
        <ion-button (click)=setShowModal(false)>Close Modal</ion-button>
      </ion-modal>
      <ion-button (click)=setShowModal(true)>Show Modal</ion-button>
 </ion-content>

[mark-at-tusksoft]

Another case to make is similar to an issue we are currently experiencing. Related SO article Just to summarize, we want to pop a modal if the network goes down. If the network goes down and a modal hasn't been popped previously, the dependent scripts have not been loaded either.

While the current 'solution' works in non-production, the moment AOT tries to compile templates, the builder fails to resolve ion-modal. The alternative is presenting and dismissing a modal on app-start with ModalController which I have managed to get it to happen fast enough that it isn't rendered. Still messy, would like to just have it bootstrapped by declaring it in the root module.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/23341, and you will be able to use modals declaratively in Ionic Framework v6. We will have updated docs that show you how to do this.

[ionitron-bot[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.