Dear ceyon67, What you need to do is:

1. Set template reference variable for your modal (<div mdbModal #yourModalVariable)
2. Create service and add new variable with type ModalDirective, then update setModal method to assign your modal to variable in service.
3.  Inject service to your components and use setModal method to assign modal to the variable in service.
4.  Update showModal method in service accordingly or create new one to show only this specific modal.
5. Use showModal method in another component to open modal.

This might not be the most elegant way to do this, but unfortunately I am not able to help you with code refactoring because I don't know your whole application logic and it looks like this problem is more related to Angular itself and not to our component. You can read more about component communication in Angular offical documentation, you may be able to find a better solution. In the future we would like to make some changes to our component, so that this type of usage would be easier. Best, Arek

---

Start your code here

export class ModalService {

pbyModal: ModalDirective;
lModal: ModalDirective;

constructor() { }

setlModal(modal: ModalDirective) {this.lModal = modal;}
showlModal() {this.lModal.show();}
hidelModal() { this.lModal.hide(); }

setpbyModal(modal: ModalDirective) { this.pbyModal = modal; }
showpbyModal() { this.pbyModal.show(); }
hidepbyModal() { this.pbyModal.hide(); }

}

Can you give me an example of how the function(still in a service) approach would work to call 
the specific modal or possibly some kinda array, i've been struggling with this for about 3 weeks. 
i guess i'm not good lol. I got it to work with @viewchild and @output decorators, My intention is to have reusable forms with different submit functions. with @viewchild and @output emitter it seems to be possible.
I plan on having 15+ modals so i want to try and reduce the duplicate code. thanks

---

Dear ceyon67,

It is possible to call multiple modals, but you would need to make some changes in that code. In example there is only one modal instance both in inbox component and service ('basicModal' in component and 'yourModal' refer to the same modal). You need to create more instances and update 'setModal' and 'showModal' functions in service accordingly, so they set/show multiple modals instead of one (or create separate functions to set/show only specific modal).

https://mdbootstrap.com/support/calling-modal-in-component-from-another-component/

Best,

Arek

---