Create a "Dynamic Modal" in a Service?

I would like to fix some issues and automate some stuff when I create a modal in Ionic V4. The solution I’ve found is to create a service to create my modals for me.

@Injectable({
    providedIn: 'root'
})
export class ModalSingleton {

   public lock = false;
   public modal: HTMLIonModalElement;

   constructor(
       public toastHelper: ToastHelper,
       public modalController: ModalController,
   ) {
   }

    /**
     * This helper adds a Double click Guard to the modal and implement the progress bar when opening
     * @param $config The modal
     */
   async presentModal( $config: ModalOptions ) {
       if ( this.lock ) {
           console.log('Double click detected');
           return;
       } // Double click guard
       this.lock = true;

       this.toastHelper.presentProgressBar();
       this.modal = await this.modalController.create( $config );

       await new Promise(r => setTimeout(r, 2));
       await this.modal.present();
       this.modal.onDidDismiss().then( onDismiss => {
            this.dismissModal();
       });
       this.toastHelper.dismissProgressBar();
   }


   async dismissModal() {
       this.modal = null;
       this.lock  = false;
   }

Then in my component, I call it.

this.modalSingleton.presentModal( {
component: PaymentMethodModal,
});

It works but I MUST add “PaymentMethodModal” and EVERY other modal.module in app.module.ts, therefore, losing the lazy loading feature.

How can my service resolve and use modals dynamically?

Thank you for your time

1 post - 1 participant

Read full topic