Dismissing modal with NgbActiveModal only works from within modal-component

I use components which i open within a modal. For example:
const modalRef = this.modalService.open(AbortModalComponent);

Within these modal-components i can inject NgbActiveModal to close the modal with this.activeModal.dismiss();. So far so good, but if i inject NgbActiveModal outside of the modal to close it from somewhere else it doesn’t.

It seems like NgbActiveModal isn’t a singleton all over the app. But how can i make it one?

In app.module.ts i only import NgbModule.forRoot().
Within my sub-modules i import NgbModule.

Hope i described it good enough. Took me hours to make a Plunker last time 🙂

5 thoughts on “Dismissing modal with NgbActiveModal only works from within modal-component

  1. @MickL NgbActiveModal is meant to be injected only in the component that is created by the modal.

    At the moment you can close the open modal using the modalRef.close() or modalRef.dismiss(). If you need other components to be able to do then you can do the following.
    Eg. : Create a Service that has

    • openModal() { this.modalRef = this.modalService.open(AbortModalComponent); }
    • closeModal() { this.modalRef.close(); }
      I.e. you need to have some way to access the modalRef in order to close it.

    Feel free to give more details of your particular use case if you think that this is insufficient. However, I don’t think that it makes sense to have a global service that can be injected anywhere.

  2. I figured this out already by inspecting the classes. Would be nice to have a global ActiveModal(s) provider, tho. It could have some functions like getActiveModals(): ModalRef[] and dismissAll(). Or dismiss(id: string) while id can be set on modalService.open().

    Using a service sounds like a good idea. Using openModal() while one is active could then dismiss the current activeModal, too.

    My use case:

    • header-component triggers the modal (e.g. “Do you really want to cancel?”)
    • content-component subscribes to the modal-button (by a service)
    • content-component (or even a subcomponent or a service) wants to close the modal after performing actions -> not possible because it has no reference

    Thanks for your quick response 🙂

  3. Having a way to dismiss modals from the outside would be useful for me too. I have rerouting logic in case the session expires. I occasionally have http requests occurring while modals are open (sometimes within modals). So sometimes, there is an open modal, the session is lost and the user gets rerouted to the login page.

    The problem is that when the user gets rerouted the modal is still open, blocking the login page.

    I would prefer to allow the service that handles the error handling (rerouting, displaying a warning) to dismiss any open modals, without really caring how they were created in the first place. (Maybe I should approach this differently, but I felt that sharing the use case could stir some more thoughts over the usefulness of allowing this)

  4. I realize this is closed, but some parts of this are relevant to me, I don’t mind moving wherever I need to.
    Is there a working example of this technique?
    inject NgbActiveModal to close the modal with this.activeModal.dismiss();

    I’m successfully able to open a component built modal from a service, but the modal isn’t aware of close() or dismiss()
    inside the controller of the modal these methods don’t work:
    modalRef.close() or modalRef.dismiss()