How to reuse Modal in multiple child components?

[dalchawalgobhi]

Hi,
I have a tree structure in my Blazor wasm app which is like
Location Name
-- Internet
-- Voice
-- Video

I have a Parent component which has location details and I have child components for services like Internet, Video and Voice.

Now I have a requirement to assign equipments to the services. For instance assign Cisco Modem to Internet.

I have created a component called Assign which will be used to assign equipments for Services. The Assign components takes Id of the service (Internet - 13241, Voice - 432543, Video - 87676 - these are dynamic ids coming from the db.)

I can put the Assign component razor code to a Modal -> ModalBody but I dont want to create multiple Modal instances for each service (Internet / Voice / Video).

Is there a way I can put the Modal code in the Location Component(Parent component) like
<Assign @ref="assignRef" />
but there should be a way to open the Modal using a click event on the child components? Also passing the id while opening the Modal.

[stsrki]

The only way that comes to my mind is to create a separate component that would hold the modal and have the parameters and methods that would control the modal behavior. On the component, you add a type of resource to load from(Internet, Video or Voice).