Skip to content
This repository was archived by the owner on Sep 7, 2020. It is now read-only.

Closing any modal instances currently opened? #161

Closed
brocktubre opened this issue Mar 24, 2017 · 4 comments
Closed

Closing any modal instances currently opened? #161

brocktubre opened this issue Mar 24, 2017 · 4 comments

Comments

@brocktubre
Copy link

brocktubre commented Mar 24, 2017

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
Copy link
Owner

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
Copy link

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
Copy link
Owner

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

dougludlow pushed a commit that referenced this issue Apr 2, 2017
- Migrate project to angular-cli.
- Rename modalInstance to modalWrapper.
- Detect backdrop and keyboard with observables.
- Add ability to dismiss all modals (#161).
- Upgrade to Angular v4 (#160).
- Subscribe to all events (#157).
- Create umd/cjs bundle.
dougludlow pushed a commit that referenced this issue Apr 2, 2017
- Migrate project to angular-cli.
- Rename modalInstance to modalWrapper.
- Detect backdrop and keyboard with observables.
- Add ability to dismiss all modals (#161).
- Upgrade to Angular v4 (#160).
- Subscribe to all events (#157).
- Create umd/cjs bundle.
@brocktubre
Copy link
Author

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.

@brocktubre brocktubre reopened this Apr 3, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants