how to pass data to Angular ng-bootstrap modal for binding

Question

Scenario:

• ChildComponent - having a lot ngModel binding elements.

<input [(ngModel)]="TryToPassDataModel.name">;

• ParentComponent -

btn.onClick = function() {
  this.bsModalRef =
    this.modalService.open(ChildComponent, TryToPassDataModel);
}

This works in ngx-bootstrap, but how to implement this in nb-bootstrap? (it looks like such a simple idea)

Answer 1

Looks like you're not using the API properly. The plugin expects the params to be passed as @Input(). Something like this would work :

const modalRef = this.modalService.open(NgbdModalContent);
modalRef.componentInstance.name = 'World';

Make sure you add a @Input for your model in ModalContent component!

See the doc for more info : https://ng-bootstrap.github.io/#/components/modal/examples

Answer 2

In Angular 8 using ng-bootstrap Modal to pass data from parent component to modal

Source Link

openModal() {
const modalRef = this.modalService.open(MyBootstrapModalComponent,
  {
    scrollable: true,
    windowClass: 'myCustomModalClass',
    // keyboard: false,
    // backdrop: 'static'
  });

let data = {
  prop1: 'Some Data',
  prop2: 'From Parent Component',
  prop3: 'This Can be anything'
}

modalRef.componentInstance.fromParent = data;
modalRef.result.then((result) => {
  console.log(result);
}, (reason) => {
});
}