fix(modal): pass an HTMLElement to modal container option (ng-boots…

…trap#3584)

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.

src/modal/modal-stack.ts

@@ -15,7 +15,7 @@ import {Subject} from 'rxjs';
 import {ngbFocusTrap} from '../util/focus-trap';
 import {ContentRef} from '../util/popup';
 import {ScrollBar} from '../util/scrollbar';
-import {isDefined, isString} from '../util/util';
+import {isDefined, isDomObject, isString} from '../util/util';
 import {NgbModalBackdrop} from './modal-backdrop';
 import {NgbModalOptions} from './modal-config';
 import {NgbActiveModal, NgbModalRef} from './modal-ref';
@@ -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 = isDomObject(options.container) ? 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();

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(() => {

src/util/util.ts

@@ -26,6 +26,10 @@ export function isDefined(value: any): boolean {
   return value !== undefined && value !== null;
 }
 
+export function isDomObject(value: any): boolean {
+  return isDefined(value) && isDefined(value.nodeType);
+}
+
 export function padNumber(value: number) {
   if (isNumber(value)) {
     return `0${value}`.slice(-2);