Make a reusable modal component in angular

Issue

Following this tutorial I've created a reusable and customizable modal component. However, I have one problem. Imagine there are 2 components, A and B, and in both I open a modal using the modal component. For component A, when a user clicks on submit button, functionA() of component A must be executed, and for B, functionB() of component B. How can I enable the modal .ts file to have access and execute both functionA() and functionB()?

If possible, I don't want to have a global service file, where all functions are there, or move all related functions to modal.ts file, rather, I like to keep each individual component clean and separate but optimize the interaction between them, such that I only pass the name of the function and the required input arguments. Does any one know what is the best practice to achieve this? Thank you in advance.

.ts of the modal:

  open(): Promise<boolean> {
     ...
  }

  async close(): Promise<void> {
      const result = await this.modalConfig.onClose();
      this.modalRef.close(result);  
  }

  async dismiss(): Promise<void> {
    ...
  }
}

config.ts of the modal:

export class ModalConfig {
  modalTitle: string;
  data: string = '';
  onClose?(): Promise<boolean> | boolean;
}

.html of the modal:

<ng-template #modal>
  <div class="modal-header">
    <button type="button" (click)="dismiss()">cancel</button>
    <button type="button" (click)="close()">Ok</button>
  </div>
</ng-template>

Solution

Move dismiss() and close() method in a service and call them from there. This should solved your issue.

Answered By - Oscar