feat(modal): pass an HTMLElement to modal container option (#3585)

Fixes #3584
ng-bootstrap · Feb 13, 2020 · 3c65b21 · 3c65b21
1 parent 2e0918a
commit 3c65b21
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/src/modal/modal-config.ts b/src/modal/modal-config.ts
@@ -44,9 +44,11 @@ export interface NgbModalOptions {
   /**
    * A selector specifying the element all new modal windows should be appended to.
    *
+   * If passed a `HTMLElement`, all new modal windows should be appended to it.
+   *
    * If not specified, will be `body`.
    */
-  container?: string;
+  container?: string | HTMLElement;
 
   /**
    * The `Injector` to use for modal content.

diff --git a/src/modal/modal-stack.ts b/src/modal/modal-stack.ts
@@ -46,8 +46,9 @@ export class NgbModalStack {
   }
 
   open(moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any, options): NgbModalRef {
-    const containerEl =
-        isDefined(options.container) ? this._document.querySelector(options.container) : this._document.body;
+    const containerEl = options.container instanceof HTMLElement ? options.container : isDefined(options.container) ?
+                                                                   this._document.querySelector(options.container) :
+                                                                   this._document.body;
     const renderer = this._rendererFactory.createRenderer(null, null);
 
     const revertPaddingForScrollBar = this._scrollBar.compensate();

diff --git a/src/modal/modal.spec.ts b/src/modal/modal.spec.ts
@@ -461,6 +461,17 @@ describe('ngb-modal', () => {
         expect(fixture.nativeElement).not.toHaveModal();
       });
 
+      it('should attach window and backdrop elements to the specified container DOM element', () => {
+        const containerDomEl = document.querySelector('div#testContainer');
+        const modalInstance = fixture.componentInstance.open('foo', {container: containerDomEl});
+        fixture.detectChanges();
+        expect(fixture.nativeElement).toHaveModal('foo', '#testContainer');
+
+        modalInstance.close();
+        fixture.detectChanges();
+        expect(fixture.nativeElement).not.toHaveModal();
+      });
+
       it('should throw when the specified container element doesn\'t exist', () => {
         const brokenSelector = '#notInTheDOM';
         expect(() => {