CODEWITHSUNDEEP
angulartypescriptmodal-dialogng-bootstrap
Behnam Abdy
Behnam Abdy

Reputation: 385

angular 2 ng-bootstrap modal

i open modal in app with component instead of template then i need to pass the object model to modal component, the problem is that the typescript gives error of modalRef.componentInstance not exists as property, i exactly copy the sample form demo page but again give the same error and never get the @input variable populated on modal content class,

this is error Cannot set property 'model' of undefined

 @Component({
selector: 'company-list',
templateUrl: './app/components/company/company-list.component.html'
})
export class CompanyListComponent implements {
private modalRes: Company;

constructor(private modalService: NgbModal) {
}

open(company: Company) {
    const modalRef = this.modalService.open(CompanyAddComponent);
    modalRef.componentInstance.name = 'some name';  //** this line gives error

    modalRef.result.then((result) => {           
    }, (reason) => {

    });     
}

createCompany(model: Company) {
    this.companyService.createCompany(model);
}
}

and inside the modal i declare this varable to get the passed in value @Input() model: Company; but it is always null

Upvotes: 3

Views: 5537

Answers (1)

ForrestB
ForrestB

Reputation: 21

For your first issue where componentInstance does not exist, I would first make sure that you are working with 1.0.0-alpha.9. I received this same error when I was working with 1.0.0-alpha.8 and upgrading fixed that issue.

Once you are working with the most recent version, your second issue seems to be that you are not referencing the correct @Input() variable. So I would change the following.

// Original
...
modalRef.componentInstance.name = 'some name'; 
...

// Updated
...
modalRef.componentInstance.model = new Company();
...

Notice in the updated section, instead of referencing the name variable that does not exist it is referencing your @Input() variable model.

Upvotes: 1

Related Questions