feat(modal): add ability to pass data to modal component (#2293)

closes #2290 closes #2275 closes #2251 fixes #2294
valor-software · Jul 28, 2017 · 8ac13f9 · 8ac13f9
1 parent 8ce315b
commit 8ac13f9
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/demo/src/app/components/+modal/demos/service-component/service-component.ts b/demo/src/app/components/+modal/demos/service-component/service-component.ts
@@ -7,11 +7,18 @@ import { BsModalRef } from 'ngx-bootstrap/modal/modal-options.class';
   templateUrl: './service-component.html'
 })
 export class DemoModalServiceFromComponent {
+  bsModalRef: BsModalRef;
   constructor(private modalService: BsModalService) {}
 
   public openModalWithComponent() {
-    this.modalService.show(ModalContentComponent);
-  }
+    let list = ['Open a modal with component', 'Pass your data', 'Do something else', '...'];
+    this.bsModalRef = this.modalService.show(ModalContentComponent);
+    this.bsModalRef.content.title = 'Modal with component';
+    this.bsModalRef.content.list = list;
+    setTimeout(() => {
+      list.push('PROFIT!!!');
+    }, 2000);
+}
 }
 
 /* This is a component which we pass in modal*/
@@ -26,15 +33,17 @@ export class DemoModalServiceFromComponent {
       </button>
     </div>
     <div class="modal-body">
-      This is a modal with component inside.
-      Click <b>&times;</b> to close modal.
+      <ul *ngIf="list.length">
+        <li *ngFor="let item of list">{{item}}</li>
+      </ul>
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Close</button>
     </div>
   `
 })
 export class ModalContentComponent {
-  public title: string = 'Modal with component';
+  public title: string;
+  public list: any[] = [];
   constructor(public bsModalRef: BsModalRef) {}
 }
diff --git a/src/component-loader/component-loader.class.ts b/src/component-loader/component-loader.class.ts
@@ -276,6 +276,7 @@ export class ComponentLoader<T> {
       const contentCmptFactory = this._componentFactoryResolver.resolveComponentFactory(content);
       const modalContentInjector = ReflectiveInjector.resolveAndCreate([...this._providers, content], this._injector);
       const componentRef = contentCmptFactory.create(modalContentInjector);
+      this._applicationRef.attachView(componentRef.hostView);
       return new ContentRef([[componentRef.location.nativeElement]], componentRef.hostView, componentRef);
     }
     return new ContentRef([[this._renderer.createText(null, `${content}`)]]);

diff --git a/src/modal/modal-options.class.ts b/src/modal/modal-options.class.ts
@@ -39,7 +39,7 @@ export class BsModalRef {
   /**
    * Reference to a component inside the modal. Null if modal's been created with TemplateRef
    */
-  content?: Object | null;
+  content?: any | null;
 }
 
 export const modalConfigDefaults:ModalOptions = {