ComponentInstace undefined on NgbModal

Question

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.

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.

score 1 · Accepted Answer · answered Aug 18 '20 at 08:41

1

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>

answered Aug 18 '20 at 08:41

Chellappan வ

23,645
3
29
60

score 0 · Answer 2 · answered Aug 18 '20 at 07:43

0

According to the doc, here is the way to pass data to the content with ngdModal :

this.modalRef['data'] = "any data you want to pass to ModalComp class";

PS : 'componentInstance' is part of the angular testing API.

answered Aug 18 '20 at 07:43

Gérôme Grignon

3,859
1
6
18

I changed to this... Now I'm not getting that error but still ContactId is undefined on the ModalComponent... – Karthik Saxena Aug 18 '20 at 08:00
try to console.log `this.contactId` to make sure it isn't undefined – Gérôme Grignon Aug 18 '20 at 08:03
this I have checked... it is not undefined... it contains the value – Karthik Saxena Aug 18 '20 at 08:06
did you change it to this : `this.modalRef['contactId'] = this.contactId` ? (check camelcase as your question include contactId and you just talk about ContactId) – Gérôme Grignon Aug 18 '20 at 08:08
Oh.. No No.. it is camelcase only contactId – Karthik Saxena Aug 18 '20 at 08:24
i'm confused with the ng-template usage in your example as it isn't how the library is described inside the docs. You should try to recreate your modal following the docs : https://www.npmjs.com/package/ngb-modal – Gérôme Grignon Aug 18 '20 at 08:32

ComponentInstace undefined on NgbModal

2 Answers2