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)

user3220633 · Accepted Answer · 2018-02-09 04:31:45Z

21

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

answered Feb 9, 2018 at 4:31

user3220633

4244 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user5365075 Over a year ago

This approach has a major problem: lifecycle hooks like ngOnInit are called before the variables are binded to the component.

user3220633 Over a year ago

To follow the changes on Input parametters, you should be using the lifecycle hook OnChanges : angular.io/api/core/OnChanges. I haven't worked with angular in a while, but I think NgAfterViewInit will also work as you expect. Basicly ngOnInit is called when the component is constructed so the params don't have time to be propagated.

user5365075 Over a year ago

Sure :) In addition though, this pattern introduces another problem of change detection. I filed an issue at ng-bootstrap's GitHub.

Code Spy · Accepted Answer · 2020-02-13 14:10:09Z

4

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) => {
});
}

answered Feb 13, 2020 at 14:10

Code Spy

9,9744 gold badges72 silver badges46 bronze badges

1 Comment

Tim Aagaard Over a year ago

This solution doesn't work if you require the data to be available in the component when it is created. Throw console.log(this.fromParent) in ngOnInit() {} in the modal and it will appear to work. Simulate a delay with setTimeout(() => {modalRef.componentInstance.fromParent = data}, 5000); on the parent and now you'll get undefined when opening the component.

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related