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() {
        this.yourModal.toggle();
    }

};

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???