Topic: Using One Modal Service to call different Modal Dialogs in Parent-Child Components

stephen.aryee free asked 4 years ago

how can i use one modal service to call different Modal in different Components(or in Parent---Child Components) when needed(in-demand bases)

for example:: i have this modal service

export class ModalService { 
    yourModal: ModalDirective;

    constructor() { }

    setModal(modal: ModalDirective) { this.yourModal = modal; }

    showModal() {


then in the navBarComponent, i call a NavBarModal dialog using the ModalService.ts file :

// trigger popup modal from different component
openModal() { this.modalService.showModal(); };

As well in LogIn component, i call a ForgotPasswordModal pop-up using the ModalService.ts file:

// trigger popup modal from different component
openModal() { this.modalService.showModal(); }

please how do i go about it: using one modal-service.ts file to call different modal(parent-child component)

any help please???

Konrad Stępień staff answered 4 years ago

Hi @stephen.aryee,

Maybe a better way is to generate modal component and then you can open component from a different component.

Please visit this page and tell me is this what you were looking for.

Best, Konrad.

stephen.aryee free commented 4 years ago

ok...thanks...i will check at the referred link docs::

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.1.0
  • Device: desktop
  • Browser: chrome, firefox
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No