Closing any modal instances currently opened?

[brocktubre]

I have multiple modal instances defined throughout multiple components within a single page. Is there a way to close any modal instance that is currently opened?

I tried declaring a global ModalComponent in the app.component.ts file and use the .close() function. Something like:

@ViewChild(ModalComponent) modal: ModalComponent;

closeCurrentModal(){
   this.modal.close();
}

[dougludlow]

Not currently, no. But I'm working on an updated version and it will include this feature. In the mean time you can create your own service that tracks any modals you use and simply loops through them and calls dismiss when needed.

[maximelafarie]

What you can do awaiting a such functionality is to store all your modal instances in a service and make a closeAll() function that iterates over your modal instances array and calls the close() method for each modal instance.

[dougludlow]

@maximelafarie that's how i'm implementing it 👍

[brocktubre]

We implemented a workaround to pass the currently opened "modal name" to our service component, store that info, and close that specific modal instance when needed (the assumption is only one modal is open at a time). The only downside is we must keep naming convention consistent when creating the modal html.

<modal #testModal [modalName]="testModal">
    <p> Test modal </p>
</modal>

and in our modal-open.directive

@Input() modalName: ModalComponent;

@HostListener('onOpen')
  onOpen(){
    this.modalService.updateModalName(this.modalName);
  }

Now we can call this.modalService.modalName.close() to close the currently opened modal.