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(ModalContentComponent, {initialState});

But it doesn't show how the ModalContentComponent actually consumes that state. I've played around in a debugger and I never see my component getting that data.

How do I access it from the component?

Answer 1

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 2

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 3

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 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

In angular 11 this is working fine for me

In parent component

import { Component, OnInit, TemplateRef} from '@angular/core';
import { BsModalRef, ModalOptions, BsModalService } from 'ngx-bootstrap/modal';
import { ModalChildComponent } from '../../shared/modal-child/modal-child.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  bsModalRef: BsModalRef;
  
  constructor(    private modalService: BsModalService
  ) { 
    this.openModalWithComponent();
  }

  ngOnInit(): void {
  }

     public openModalWithComponent() {
      let initialState = { message: 'popup message', title:'popup title'};
      let modalConfig = { animated: true, keyboard: true, backdrop: true, ignoreBackdropClick: false };
      /* this is how we open a Modal Component from another component */
      this.bsModalRef = this.modalService.show(ModalCalendlyComponent, 
        Object.assign({}, modalConfig, {class: 'modal-sm', initialState
        })
        );
    }

  }

In child component

import { Component, OnInit } from '@angular/core';
import { BsModalRef, ModalOptions, BsModalService } from 'ngx-bootstrap/modal';

@Component({
  selector: 'app-modal-child',
  templateUrl: './modal-child.component.html',
  styleUrls: ['./modal-child.component.css']
})
export class ModalChildComponent implements OnInit {
    constructor(
    public bsModalRef: BsModalRef, 
    public options: ModalOptions
  ) {
    console.log(this.options.initialState);
   }

  ngOnInit(): void {

  }

}

Answer 6

if you used ngx-bootstrap/modal then you can do this way.

// Parent Component

let initialState = { message: 'This is test' };
this.modalRef = this.modalService.show(Component, { initialState });

this.modalRef.content.action.take(1).subscribe((value) => {
  console.log(value) // here you will get the value
});

// Modal Component

import { BsModalRef, ModalOptions, BsModalService } from 'ngx-bootstrap/modal';

@Output() action = new EventEmitter();

 constructor(public options: ModalOptions)

  ngOnInit() {
    console.log(this.options.initialState); // here you will get the value
  }

 closedModal() {
    this.modalService.hide(1);
    this.action.emit(true);
  }

Answer 7

In ngx-bootstrap version 8, this has been changed. Now you can get the intialState object value through the BsModalService

In the service, you would have to call:

export class DynamicComponentService {

  modalRef: BsModalRef;

  constructor(private modalService: BsModalService, private modalOptions: ModalOptions) { }

  show(template: TemplateRef<any>): void {           

    const initialState = { message: "hello" };
    this.modalRef = this.modalService.show(template, {initialState});
  }
}

Then, in the child modal, you can get the value like this:

export class ChildComponent implements OnInit {   
  

  constructor(private modalService: BsModalService) {
    
    console.log('OPTIONS', this.modalService.config.initialState);
  }

  ngOnInit(): void {
   
  }
}

Hope it helps someone. I've been trying all other answers, but none works for me until I dig deeper into the object and see it myself

Answer 8

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

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';