feat(modal): dismissAll

close ng-bootstrap#1963

demo/src/app/components/modal/demos/dismissall/modal-dismissall.html

@@ -0,0 +1,17 @@
+<ng-template #content let-c="close" let-d="dismiss">
+  <div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">Sample dialog</h4>
+    <button type="button" class="close" aria-label="Close" (click)="d()">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    This is a simple dialog.
+  </div>
+</ng-template>
+
+<div class="modal-dismissall-always-visible">
+  <button class="btn btn-lg btn-outline-primary m-2" (click)="open(content)">Launch demo modal</button>
+  <button class="btn btn-lg btn-outline-primary m-2" (click)="dismissAll()">Dismiss all</button>
+</div>
+<div class="modal-dismissall-space"></div>

demo/src/app/components/modal/demos/dismissall/modal-dismissall.ts

@@ -0,0 +1,33 @@
+import {Component} from '@angular/core';
+
+import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'ngbd-modal-dismissall',
+  templateUrl: './modal-dismissall.html',
+  styles: [`
+    .modal-dismissall-always-visible {
+      position: absolute;
+      z-index: 200000;
+      background-color: white;
+      border-radius: 5px;
+    }
+    .modal-dismissall-space {
+      height: 100px;
+    }
+  `]
+})
+export class NgbdModalDismissall {
+  closeResult: string;
+
+  constructor(private modalService: NgbModal) {}
+
+  open(content) {
+    this.modalService.open(content);
+  }
+
+  dismissAll() {
+    this.modalService.dismissAll();
+  }
+
+}

demo/src/app/components/modal/demos/index.ts

@@ -1,8 +1,9 @@
 import {NgbdModalBasic} from './basic/modal-basic';
 import {NgbdModalComponent, NgbdModalContent} from './component/modal-component';
+import {NgbdModalDismissall} from './dismissall/modal-dismissall';
 import {NgbdModalOptions} from './options/modal-options';
 
-export const DEMO_DIRECTIVES = [NgbdModalBasic, NgbdModalComponent, NgbdModalOptions];
+export const DEMO_DIRECTIVES = [NgbdModalBasic, NgbdModalComponent, NgbdModalDismissall, NgbdModalOptions];
 export {NgbdModalContent} from './component/modal-component';
 
 export const DEMO_SNIPPETS = {
@@ -12,6 +13,9 @@ export const DEMO_SNIPPETS = {
   'component': {
     'code': require('!!raw-loader!./component/modal-component'),
     'markup': require('!!raw-loader!./component/modal-component.html')},
+  'dismissall': {
+    'code': require('!!raw-loader!./dismissall/modal-dismissall'),
+    'markup': require('!!raw-loader!./dismissall/modal-dismissall.html')},
   'options': {
     'code': require('!!raw-loader!./options/modal-options'),
     'markup': require('!!raw-loader!./options/modal-options.html')}

demo/src/app/components/modal/modal.component.ts

@@ -16,6 +16,9 @@ import {DEMO_SNIPPETS} from './demos';
       <ngbd-example-box demoTitle="Components as content" [snippets]="snippets" component="modal" demo="component">
           <ngbd-modal-component></ngbd-modal-component>
       </ngbd-example-box>
+      <ngbd-example-box demoTitle="Dismiss all modal windows" [snippets]="snippets" component="modal" demo="dismissall">
+          <ngbd-modal-dismissall></ngbd-modal-dismissall>
+      </ngbd-example-box>
       <ngbd-example-box demoTitle="Modal with options" [snippets]="snippets" component="modal" demo="options">
           <ngbd-modal-options></ngbd-modal-options>
       </ngbd-example-box>

src/modal/modal-stack.ts

@@ -22,6 +22,7 @@ import {NgbActiveModal, NgbModalRef} from './modal-ref';
 export class NgbModalStack {
   private _windowAttributes = ['ariaLabelledBy', 'backdrop', 'centered', 'keyboard', 'size', 'windowClass'];
   private _backdropAttributes = ['backdropClass'];
+  private _openedModalRefs: NgbModalRef[] = [];
 
   constructor(
       private _applicationRef: ApplicationRef, private _injector: Injector, @Inject(DOCUMENT) private _document,
@@ -45,6 +46,7 @@ export class NgbModalStack {
     let windowCmptRef: ComponentRef<NgbModalWindow> = this._attachWindowComponent(moduleCFR, containerEl, contentRef);
     let ngbModalRef: NgbModalRef = new NgbModalRef(windowCmptRef, contentRef, backdropCmptRef, options.beforeDismiss);
 
+    this._registerOpenedModalRef(ngbModalRef);
     ngbModalRef.result.then(revertPaddingForScrollBar, revertPaddingForScrollBar);
     activeModal.close = (result: any) => { ngbModalRef.close(result); };
     activeModal.dismiss = (reason: any) => { ngbModalRef.dismiss(reason); };
@@ -57,6 +59,19 @@ export class NgbModalStack {
     return ngbModalRef;
   }
 
+  private _registerOpenedModalRef(ngbModalRef: NgbModalRef) {
+    const unregisterOpenedModalRef = () => {
+      const index = this._openedModalRefs.indexOf(ngbModalRef);
+      if (index > -1) {
+        this._openedModalRefs.splice(index, 1);
+      }
+    };
+    this._openedModalRefs.push(ngbModalRef);
+    ngbModalRef.result.then(unregisterOpenedModalRef, unregisterOpenedModalRef);
+  }
+
+  public dismissAll(reason?: any) { this._openedModalRefs.forEach(ngbModalRef => ngbModalRef.dismiss(reason)); }
+
   private _attachBackdrop(moduleCFR: ComponentFactoryResolver, containerEl: any): ComponentRef<NgbModalBackdrop> {
     let backdropFactory = moduleCFR.resolveComponentFactory(NgbModalBackdrop);
     let backdropCmptRef = backdropFactory.create(this._injector);

src/modal/modal.ts

@@ -24,4 +24,9 @@ export class NgbModal {
     const combinedOptions = Object.assign({}, this._config, options);
     return this._modalStack.open(this._moduleCFR, this._injector, content, combinedOptions);
   }
+
+  /**
+   * Dismiss all currently displayed modal windows with the supplied reason.
+   */
+  dismissAll(reason?: any) { this._modalStack.dismissAll(reason); }
 }