Feat add container to modal options

apps/ngx-bootstrap-docs/src/ng-api-doc.ts

@@ -2746,6 +2746,11 @@ export const ngdoc: any = {
         "type": "string",
         "description": "<p>Css class for opened modal</p>\n"
       },
+      {
+        "name": "container",
+        "type": "string | ElementRef",
+        "description": "<p>The CSS Selector or ElementRef for where the modal window will be injected into the page.</p>\n"
+      },
       {
         "name": "closeInterceptor",
         "type": "CloseInterceptorFn",

libs/common-docs/src/lib/demo-section-components/demo-examples-section/examples.component.html

@@ -19,7 +19,7 @@ <h3 *ngIf="item.title" [attr.id]="item.anchor" class="d-flex justify-content-bet
       </p>
     </h3>
     <p *ngIf="item.description" [innerHTML]="item.description"></p>
-    <ng-sample-box [ts]="item?.component?.default" [html]="item?.html?.default" [style]="item.style ">
+    <ng-sample-box [ts]="item?.component?.default" [html]="item?.html?.default" [style]="item.style?.default">
       <ng-container *ngComponentOutlet="item.outlet"></ng-container>
     </ng-sample-box>
   </div>

libs/common-docs/src/lib/models/components-examples.model.ts

@@ -6,7 +6,7 @@ export interface ComponentExample {
   description?: string;
   component?: SourceCodeModel;
   html?: SourceCodeModel;
-  style?: string;
+  style?: SourceCodeModel;
   css?: string;
   outlet?: any; // ToDo: Component<T>
 }

libs/doc-pages/modal/src/lib/demos/service-component/service-component.css

@@ -0,0 +1,4 @@
+.profit {
+  color: green;
+  font-weight: 700;
+}

libs/doc-pages/modal/src/lib/demos/service-component/service-component.ts

@@ -12,12 +12,14 @@ export class DemoModalServiceFromComponent {
 
   openModalWithComponent() {
     const initialState: ModalOptions = {
+      container: 'bs-demo',
       initialState: {
         list: [
           'Open a modal with component',
           'Pass your data',
           'Do something else',
-          '...'
+          '...',
+          'Push button to find out!'
         ],
         title: 'Modal with component'
       }
@@ -32,6 +34,7 @@ export class DemoModalServiceFromComponent {
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'modal-content',
+  styleUrls: ['./service-component.css'],
   template: `
     <div class="modal-header">
       <h4 class="modal-title pull-left">{{title}}</h4>
@@ -41,23 +44,26 @@ export class DemoModalServiceFromComponent {
     </div>
     <div class="modal-body">
       <ul *ngIf="list.length">
-        <li *ngFor="let item of list">{{item}}</li>
+        <li *ngFor="let item of list" [ngClass]="{ 'profit' : item === 'PROFIT!!!'}">{{item}}</li>
       </ul>
     </div>
     <div class="modal-footer">
+      <button *ngIf="!profitBtnPressed" type="button" class="btn btn-default" (click)="showProfit()">Find Out</button>
       <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">{{closeBtnName}}</button>
     </div>
   `
 })
 
-export class ModalContentComponent implements OnInit {
+export class ModalContentComponent {
   title?: string;
+  profitBtnPressed: boolean = false;
   closeBtnName?: string;
   list: any[] = [];
 
   constructor(public bsModalRef: BsModalRef) {}
 
-  ngOnInit() {
-    this.list.push('PROFIT!!!');
+  showProfit() {
+    this.profitBtnPressed = true;
+    this.list[this.list.length - 1] = 'PROFIT!!!';
   }
 }

libs/doc-pages/modal/src/lib/modal-section.list.ts

@@ -60,6 +60,7 @@ export const demoComponentContent: ContentSection[] = [
         anchor: 'service-component',
         component: require('!!raw-loader!./demos/service-component/service-component.ts'),
         html: require('!!raw-loader!./demos/service-component/service-component.html'),
+        style: require('!!raw-loader!./demos/service-component/service-component.css'),
         description: `<p>Creating a modal with component just as easy as it is with template. Just pass your component
           in <code>.show()</code> method as in example, and don't forget to include your component to
           <code>entryComponents</code> of your <code>NgModule</code><br> If you passed a component

src/modal/bs-modal.service.ts

@@ -110,7 +110,7 @@ export class BsModalService {
       if (isBackdropEnabled && isBackdropInDOM) {
         this._backdropLoader
           .attach(ModalBackdropComponent)
-          .to('body')
+          .to(this.config.container)
           .show({ isAnimated: this.config.animated });
         this.backdropRef = this._backdropLoader._componentRef;
       }
@@ -140,7 +140,7 @@ export class BsModalService {
       .provide({ provide: ModalOptions, useValue: this.config })
       .provide({ provide: BsModalRef, useValue: bsModalRef })
       .attach(ModalContainerComponent)
-      .to('body');
+      .to(this.config.container);
     bsModalRef.hide = () => this.hide(bsModalRef.id);
     bsModalRef.setClass = (newClass: string) => {
       if (modalContainerRef.instance) {

src/modal/modal-options.class.ts

@@ -1,4 +1,4 @@
-import { Injectable, StaticProvider, InjectionToken } from '@angular/core';
+import { ElementRef, Injectable, StaticProvider, InjectionToken } from '@angular/core';
 import { ClassName, CloseInterceptorFn, DismissReasons, Selector, TransitionDurations } from './models';
 
 @Injectable({providedIn: 'platform'})
@@ -30,6 +30,10 @@ export class ModalOptions<T = Record<string, unknown>> {
    * Css class for opened modal
    */
   class?: string;
+  /**
+   * CSS selector or ElementRef to which the modal is appended
+   */
+  container?: string | ElementRef;
   /**
    * Toggle animation
    */
@@ -63,6 +67,7 @@ export const modalConfigDefaults: ModalOptions = {
   show: false,
   ignoreBackdropClick: false,
   class: '',
+  container: 'body',
   animated: true,
   initialState: {},
   closeInterceptor: void 0

src/modal/modal.directive.ts

@@ -337,7 +337,7 @@ export class ModalDirective implements OnDestroy, OnInit {
       this.removeBackdrop();
       this._backdrop
         .attach(ModalBackdropComponent)
-        .to('body')
+        .to(this._config.container)
         .show({ isAnimated: this._config.animated });
       this.backdrop = this._backdrop._componentRef;
 

src/modal/testing/modal.service.spec.ts

@@ -4,7 +4,9 @@ import { pairwise, tap } from 'rxjs/operators';
 
 import { BsModalService, ModalModule } from '../index';
 
-@Component({ template: '<div>Dummy Component</div>' })
+@Component({
+  selector: 'dummy-component',
+  template: '<div>Dummy Component</div>' })
 class DummyComponent {
   // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-unused-vars
   constructor(modalService: BsModalService) { }
@@ -130,4 +132,20 @@ describe('Modal service', () => {
     jest.runAllTimers();
     expect(onHiddenSpy).toHaveBeenCalledWith({ id });
   });
+
+  it('should render in <body> element by default', done => {
+    modalService.onShown.subscribe((data) => {
+      expect(document.querySelector('dummy-component modal-container')).toBeDefined();
+      done();
+    })
+    modalService.show(TestModalComponent);
+  })
+
+  it('should render in the container selector provided', done => {
+    modalService.onShown.subscribe((data) => {
+      expect(document.querySelector('dummy-component modal-container')).toBeDefined();
+      done();
+    })
+    modalService.show(TestModalComponent, { container: 'dummy-component'});
+  })
 });