feat(modal): Add container property to ModalOptions

Updated documentation pages
Updated test case for ModalOptions.container property

Author: Evan Qualls

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,27 @@ 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/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'});
+  })
 });