9

Let's say i have such 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'm calling this modal from another component so:

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

    modalRef.componentInstance.header = this.text;

How can i put into NgbModal html with bindings etc? Into ng-content

brabertaser19
  • 5,678
  • 16
  • 78
  • 184
  • 1
    For one thing, although I doubt it's related to your issue, you appear to be accessing a private property in the template. – jonrsharpe Jun 04 '17 at 21:53
  • Must it be this? `` – H. Pauwelyn Jun 07 '17 at 11:39
  • @H.Pauwelyn depends on a route i'm going to – brabertaser19 Jun 07 '17 at 12:40
  • 1
    Can post your code into plunker, with a dumb userId or whatever information. – trungk18 Jun 14 '17 at 02:20
  • What are you trying to achieve exactly? Can you give an example of the final result that you want? – ConnorsFan Jun 20 '17 at 13:23
  • 1
    @ConnorsFan i'm trying to put somehow into ng-content html, main problem: this.modalService do not work with ng-content. Is it clear or not? – brabertaser19 Jun 20 '17 at 14:03
  • 1
    NgbModal doesn't support projection in ng-content. You can use ngTemplateOutlet like https://plnkr.co/edit/Txhhutr5iYAiczgB3sC8?p=preview – yurzui Jun 21 '17 at 09:59
  • Notice that it the same solution as @Julia Passynkova had already proposed – yurzui Jun 21 '17 at 10:08
  • `NgbModal` takes a `ComponentType` parameter and then dynamically creates the instance of the component. I tried to instantiate the component outside and inject another component to its ng-content, but that is just another instance of the same component. Final words- it is not possible unless you fork the ngbModal and add an additional method which takes `componentRef` instead of `ComponentType`. Refer below the line of code - `const contentRef = this._getContentRef(moduleCFR, options.injector || contentInjector, content, activeModal, options);` - refer to the `NgbModalStack` class – Irshad May 30 '20 at 10:41

1 Answers1

4

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

here is method that open the modal:

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

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

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

   constructor() {
   }
 }

===

You can pass a templateRef as input as well. Let say 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);
  }
}
Julia Passynkova
  • 17,256
  • 6
  • 33
  • 32