Angular 2 ng-bootstrap Modal: How to pass data to entry component

Question

I\'m trying to send data to a custom modal content component so I can call it from any other component and not repeat code. I\'m new to Angular 2 and have followed the \"Com

Answer 1

Just provide a service and inject it to VideoModalComponent and PageComponent then you can use this service to communicate.

See https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service for more details and examples.

Answer 2

Here are some ways to do it.

1. Expose an instance of a component
2. Use resolve and expose resolved values on an instance of NgbActiveModal
3. Use resolve and bind resolved values to component's inputs.

See: https://github.com/ng-bootstrap/ng-bootstrap/issues/861#issuecomment-253500089

Answer 3

I solved it! Here's how to do it:

• In the component(from where you are opening the modal) do this:

  const modalRef = this.modalService.open(ModalComponent);
  
  modalRef.componentInstance.passedData= this.dataToPass;
  
  modalRef.result.then(result => {
    //do something with result
  }                                                       
  

• In the modal component(receiving end):

  export class ModalComponent { 
  
   passedData: typeOfData;     // declare it!
  
   someFunction() {     // or some  lifecycle hook 
    console.log(this.passedData)  // and then, use it!
   }
  
  // rest of the ModalComponent 
  }