diff --git a/demo/src/app/components/modal/demos/options/modal-options.ts b/demo/src/app/components/modal/demos/options/modal-options.ts index 1753062470..2ba6530185 100644 --- a/demo/src/app/components/modal/demos/options/modal-options.ts +++ b/demo/src/app/components/modal/demos/options/modal-options.ts @@ -39,7 +39,9 @@ export class NgbdModalOptions { this.modalService.open(content, { size: 'lg' }); } - openXl(content) { this.modalService.open(content, {size: 'xl'}); } + openXl(content) { + this.modalService.open(content, { size: 'xl' }); + } openVerticallyCentered(content) { this.modalService.open(content, { centered: true }); diff --git a/src/modal/modal-config.ts b/src/modal/modal-config.ts index cde3f8ab37..a657d364fd 100644 --- a/src/modal/modal-config.ts +++ b/src/modal/modal-config.ts @@ -70,7 +70,7 @@ export interface NgbModalOptions { /** * Size of a new modal window. */ - size?: 'sm' | 'lg' | 'xl'; + size?: 'sm' | 'lg' | 'xl' | string; /** * A custom class to append to the modal window. @@ -103,7 +103,7 @@ export class NgbModalConfig implements Required { injector: Injector; keyboard = true; scrollable: boolean; - size: 'sm' | 'lg' | 'xl'; + size: 'sm' | 'lg' | 'xl' | string; windowClass: string; backdropClass: string; } diff --git a/src/modal/modal.spec.ts b/src/modal/modal.spec.ts index 08ff227118..c80ffdd9ae 100644 --- a/src/modal/modal.spec.ts +++ b/src/modal/modal.spec.ts @@ -482,6 +482,17 @@ describe('ngb-modal', () => { expect(fixture.nativeElement).not.toHaveModal(); }); + it('should accept any strings as modal size', () => { + const modalInstance = fixture.componentInstance.open('foo', {size: 'ginormous'}); + fixture.detectChanges(); + expect(fixture.nativeElement).toHaveModal('foo'); + expect(document.querySelector('.modal-dialog')).toHaveCssClass('modal-ginormous'); + + modalInstance.close(); + fixture.detectChanges(); + expect(fixture.nativeElement).not.toHaveModal(); + }); + }); describe('window custom class options', () => {