How to pass parameteres to modal?

Question

That\'s the way I use the ng2-bootstrap modal:

import {Component} from \'@angular/core\';
import {NgbModal} from \'@ng-bootstrap/ng-bootstrap\';

@Component({
           


        

Answer 1

There is a better approach to handle data in the modal if you need to have data immediately after modal construction. Using angular injector technic.

1. Define a model for your data.

class CustomModalOptions {
  stringProp: string; 
  numberProp: number;
}

2. Build your modal somewhere in your component:

this.modal.open(MyModal, {
  injector: Injector.create([{
    provide: CustomModalOptions, useValue: { stringProp: "foo bar", numberProp: 17 }
  }], this.injector)
});

3. Handle data retrieve in your Modal Component

@Component({ ... })
class MyModal {
  constructor(private options: CustomModalOptions) {
    console.log(this.options.stringProp);
    console.log(this.options.numberProp);
  }
}