Reusable Modal Component: ion-modal vs. modalController Service

Ionic Framework Ionic Angular
1

Hello, I’m working on an Ionic application and trying to create a reusable modal component. I’m considering two approaches and would appreciate some guidance:

Scenario:

Imagine a ‘confirmation modal’ that displays a message and ‘Yes/No’ buttons. I need to use this modal in multiple parts of my application.

Shared Component:

  • In both approaches, I would create a separate component (e.g., ConfirmationModalComponent) to define the modal’s content (message, buttons) and logic (handling ‘Yes/No’ clicks).

Approach 1: Using <ion-modal> Directly

  • I would use <ion-modal> directly within each component where the modal is needed.
  • I would pass data to the ConfirmationModalComponent via input properties within the <ion-modal> tag.
  • I would use @ViewChild('modal') modal: IonModal; to access the <ion-modal> instance within the component and use this.modal.dismiss() or this.modal.present() to control its presentation and dismissal.
  • Each instance of <ion-modal> would handle its own presentation and dismissal.

Approach 2: Creating a Service with modalController

  • I would create a service (e.g., ModalService) that uses modalController to programmatically create and present the ConfirmationModalComponent.
  • The service would handle data passing to the ConfirmationModalComponent when creating the modal.
  • To dismiss or open the modal, I would call methods on the modalController instance (e.g., modalController.dismiss(), modalController.create(), modal.present()) from within the service or in the same component!.
  • The service would centralize the logic for presenting and dismissing the modal, ensuring consistent behavior across the application.

Questions:

  1. Maintainability: Which approach is generally considered more maintainable for a moderately complex application with many instances of this modal?
  2. Control and Customization: Does creating a service with modalController provide significant advantages in terms of control and customization over using <ion-modal> directly? For instance, can it simplify global styling or pre-processing of data?
  3. Best Practices: Are there established best practices for creating reusable modal components in Ionic?
  4. Performance: Is there a performance difference between the two approaches?

For simple modals, is the complexity of creating a resuable modal worth it, or should one opt for individual modals?

I’m also curious if these considerations apply similarly to other Ionic components like action sheets or alerts. I have a service for alerts or a toastService where i indeed benefit the use of that. But what about modals?

Thank you for your insights!