In the parentComponent, the initialState data is sent using the config parameter in modalService.show:

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

To access the data in ModalContentComponent, simply define a variable with the exact same name, for example data: string;. This will allow you to access the value of data in both the ModalContentComponent.html and ModalContentComponent.ts files.

When crafting a modal, all the attributes within initialState are duplicated to the component that is specified as the modal content.

For instance, if your initialState appears as follows:

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

Then these attributes are replicated into your modal content component, allowing you to access and utilize them in your template or within ngOnInit conventionally. Essentially, these attributes act like @Input.

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

You have the option to utilize the BsModalRef content feature

In your my-modal.component.ts file:

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

To invoke your modal from another 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';
    }
...

Working flawlessly in angular 11

Within the 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 demonstrates opening a Modal Component from another component */
      this.bsModalRef = this.modalService.show(ModalCalendlyComponent, 
        Object.assign({}, modalConfig, {class: 'modal-sm', initialState
      	}));
    }

  }

Within the 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 {

  }

}

I am unable to provide feedback on IlyaSurmay's response at this time, however, it appears that the solution is effective in version 2.0.2 but not in version 2.0.0.

When utilizing the ngx-bootstrap/modal, you can implement it in the following manner.

// Starting with the Parent Component:

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

this.modalRef.content.action.take(1).subscribe((value) => {
  console.log(value) // The returned value will be displayed here
});

// Moving on to the Modal Component:

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

@Output() action = new EventEmitter();

constructor(public options: ModalOptions)

ngOnInit() {
    console.log(this.options.initialState); // The provided value can be seen here
}

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

In the latest update of ngx-bootstrap (version 8), a significant change has been made. Now, accessing the initialState object value is done through the BsModalService.

To achieve this in the service, you need to make the following 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});
  }
}

Subsequently, within the child modal component, you can retrieve the value as shown below:

export class ChildComponent implements OnInit {   
  

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

  ngOnInit(): void {
   
  }
}

This insight could prove helpful to someone encountering similar issues. While exploring various solutions, it wasn't until I delved deeper into the underlying object structure that I discovered the solution for myself.