Angular 2: NgbModal moves into view

Question

Let's say I have such a modal template:

<div class="modal-header"> <h3 [innerHtml]="header"></h3> </div> <div class="modal-body"> <ng-content></ng-content> </div> <div class="modal-footer"> </div> 

and I call this modal from another component, therefore:

---

  const modalRef = this.modalService.open(MobileDropdownModalComponent, { keyboard: false, backdrop: 'static' }); modalRef.componentInstance.header = this.text; 

---

How can I put in NgbModal html with bindings etc.? In ng-content

Answer 1

You can get a link to the component instance from NgbModalRef returned by the public method and set binging there.

here is the method that the modal opens:

 open() { const instance = this.modalService.open(MyComponent).componentInstance; instance.name = 'Julia'; } 

and here is the component that will be displayed in modal format with one input binding

 export class MyComponent { @Input() name: string; constructor() { } } 

===

You can also pass the Ref pattern as input. Let them say that the parent component has

  <ng-template #tpl>hi there</ng-template> export class AppComponent { @ViewChild('tpl') tpl: TemplateRef<any>; constructor(private modalService: NgbModal) { } open() { const instance = this.modalService.open(MyComponent).componentInstance; instance.tpl = this.tpl; } } 

and MyComponent:

 export class MyComponentComponent { @Input() tpl; constructor(private viewContainerRef: ViewContainerRef) { } ngAfterViewInit() { this.viewContainerRef.createEmbeddedView(this.tpl); } }