angulartypescriptng-bootstrapng-bootstrap-modal

ComponentInstace undefined on NgbModal


I'm breaking my head since yesterday night thinking why this code is not working

onOutletFeedback(content) {
    const modalRef  = this.modalService.open(content, {
      scrollable: false,
      size: 'md'
    });
    modalRef.componentInstance.contactId = this.contactId; //Facing issue at this line
    modalRef.componentInstance.url = environment.apiUrl;
    modalRef.result.then(
      result => {
        // on save click
      },
      reason => {
        // on dismiss
        console.log(`Dismissed with: ${reason}`);
      }
    );
  }

I'm always getting this error when I try to invoke my Modal.

enter image description here

My Modal Code

    <button (click)="onOutletFeedback(OutletFeedbackModal)"
                  class="btn btn-secondary"
                  placement="bottom"
                  ngbTooltip="Feedback" >
                  <i class="icon-comment"></i></button>

<ng-template #OutletFeedbackModal let-modal>
  <app-outlet-feedback [modal]="modal"></app-outlet-feedback>
</ng-template>

My ModalComponent Code

export class OutletFeedbackComponent implements OnInit {
  @Input() modal: any;
  @Input() contactId: number;

Any help is appreciated I've checked the docs and every possible link.


Solution

  • You can assign input property value directly to app-outlet-feed try this:

    <ng-template #OutletFeedbackModal let-modal>
         <app-outlet-feedback [contactId]="contactId" [modal]="modal"></app-outlet-feedback>
    </ng-tempalte>