fix(modal): honor modalWndowClass option

fix #4067
ng-bootstrap · Apr 13, 2021 · 6e970f1 · 6e970f1
1 parent b27b899
commit 6e970f1
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git a/demo/src/app/components/modal/demos/options/modal-options.html b/demo/src/app/components/modal/demos/options/modal-options.html
@@ -52,3 +52,4 @@ <h4 class="modal-title">Modal title</h4>
 <button class="btn btn-outline-primary mb-2 mr-2" (click)="openXl(content)">Extra large modal</button>
 <button class="btn btn-outline-primary mb-2 mr-2" (click)="openVerticallyCentered(content)">Modal vertically centered</button>
 <button class="btn btn-outline-primary mb-2 mr-2" (click)="openScrollableContent(longContent)">Modal scrollable content</button>
+<button class="btn btn-outline-primary mb-2 mr-2" (click)="openModalDialogCustomClass(content)">Modal with dialog custom class</button>
diff --git a/demo/src/app/components/modal/demos/options/modal-options.ts b/demo/src/app/components/modal/demos/options/modal-options.ts
@@ -50,4 +50,8 @@ export class NgbdModalOptions {
   openScrollableContent(longContent) {
     this.modalService.open(longContent, { scrollable: true });
   }
+
+  openModalDialogCustomClass(content) {
+    this.modalService.open(content, { modalDialogClass: 'dark-modal' });
+  }
 }
diff --git a/src/modal/modal-stack.ts b/src/modal/modal-stack.ts
@@ -30,7 +30,7 @@ export class NgbModalStack {
   private _modalRefs: NgbModalRef[] = [];
   private _windowAttributes = [
     'animation', 'ariaLabelledBy', 'ariaDescribedBy', 'backdrop', 'centered', 'keyboard', 'scrollable', 'size',
-    'windowClass'
+    'windowClass', 'modalDialogClass'
   ];
   private _windowCmpts: ComponentRef<NgbModalWindow>[] = [];
   private _activeInstances: EventEmitter<NgbModalRef[]> = new EventEmitter();

diff --git a/src/modal/modal.spec.ts b/src/modal/modal.spec.ts
@@ -587,6 +587,21 @@ describe('ngb-modal', () => {
 
     });
 
+    describe('modal dialog custom class options', () => {
+
+      it('should render modals with the correct dialog custom classes', () => {
+        const modalInstance = fixture.componentInstance.open('foo', {modalDialogClass: 'bar'});
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveModal('foo');
+        expect(document.querySelector('.modal-dialog')).toHaveCssClass('bar');
+
+        modalInstance.close();
+        fixture.detectChanges();
+        expect(fixture.nativeElement).not.toHaveModal();
+      });
+
+    });
+
     describe('custom injector option', () => {
 
       it('should render modal with a custom injector', () => {