How pass data from ModalService into component

Question

I\'m trying to use ngx-bootstrap-modal to pass data from a modal service into a modal component. The examples show this:

this.modalService.show(ModalContentCompo         


        

Answer 1

You can also use the BsModalRef content Like

my-modal.component.ts

export class MyModalComponent {
  public myContent;
  constructor(){}
}

calling your modal from some other component

import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
...
    public modalRef: BsModalRef;

    constructor(public modalService: BsModalService){}

    public openModal() {
       this.modalRef = this.modalService.show(MyModalComponent);
       this.modalRef.content.myContent= 'My Modal Content';
    }
...

Answer 2

At the stage of creating a modal, every property from initialState is copied to the component that you pass as a modal content.

For example, if your initialState looks like this:

const initialState = {
   list: [
     'Open a modal with component',
     'Pass your data',
     'Do something else',
     '...',
     'PROFIT!!!'
   ],
   title: 'Modal with component',
   closeBtnName: 'Close'
 };

Then all these properties are copied to your modal content component and they're accessible there and you can use them in your template or ngOnInit as usual. In general, these properties are like @Input.

Example - https://stackblitz.com/edit/angular-9n2zck?file=app/service-component.ts

Answer 3

Here, in parentComponent where initialState data is being sent using config param in modalService.show:

const initialState = {
      data: "Test Data"
    };
    this.modalService.show(ModalContentComponent, {initialState});

Access the data in ModalContentComponent by simply defining exact same named variable, i.e., data: string; You will be able to access value of data in ModalContentComponent.html and ModalContentComponent.ts.

Answer 4

Since I can't yet comment on IlyaSurmay's answer...his solution works in 2.0.2 (but not in 2.0.0).

Answer 5

set @Input() parameter in the popup component to access the property in initialState

for eg:
in Parent Component

const initialState = { message: 'popup message', title:'popup title'};
let bsModalRef = this.modalService.show(ConfirmPopupComponent, Object.assign({}, this.modalConfig, { class: 'modal-sm', initialState })



in confirmPopupComponent

@Input() message: string = 'Message here...'; // we can set the default value also
@Input() title: string = 'default title';