Passing data into Angular 13 modal

Question

I'm trying to pass data into a modal. The modal is a separate component alltogether.

I'm able to console.log the bsModalRef property in the constructor, but for some reason, I can't console.log the bsModalRef.content property.

Here is my code in the page I'm launching the modal from...

<button class="btn btn-primary"
        type="button"
        (click)="openDeleteModal(result.id)">
Edit
</button>

Here is the code for that openDeleteModal() method...

public openDeleteModal(id: number): void {

  this.selectedCase = this.listOfSearchResults.filter(result => result.id == id);

  const initialState: ModalOptions = {
    initialState: {
      list: [
        this.selectedCase
      ],
      title: 'Edit Case',
      whatYouWantToDelete: 'this error'
    }
  };
  this.bsModalRef = this.modalService.show(DeleteModalComponent, initialState);
}

Now, for the code in the modal itself, I'm importing BsModalRef like this...

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

Here are the properties I set...

title?: string;
whatYouWantToDelete?: string;
list?: any[];
initialState: any;

and this is what I have for the constructor...

constructor(
    public bsModalRef: BsModalRef,
    private http: HttpClient) {
    this.list = this.list;
    console.log("this.list: ", this.list);
    console.log("this.bsModalRef in constructor: ", this.bsModalRef);
    console.log("this.bsModalRef.content in constructor: ", this.bsModalRef.content);
  }

this is the screenshot of what I'm seeing in the console.log...

And this is the content part of the BsModalRef object...

My question is, how do I access that data in the list property from the constructor? That object has properties that I need to populate a form I have in the modal.

Stated differently...

this line of code...

this.bsModalRef = this.modalService.show(DeleteModalComponent, initialState);

opens the modal and passes in the data as initialState. How do I access the data that I'm passing in through the initialState object from within the modal itself?

Here is a screenshot that shows I can see the data in the NgOnInit, but the issue is I can't get that data to show up in the modal html file.

Here is the html in the delete component file where I'm trying to display the list.

<p>Are you sure you want to delete {{ this.whatYouWantToDelete }}?</p>

<p>id selected: {{ this.products }}</p>

<div *ngFor="let user of this.list; index as i">
   Case Id: {{user.caseId}}
</div>

Answer 1

There are 2 key notes here:

1. Objects logged in the Javascript console are "live", so expanding them shows the current contents of the object. Content.list was empty when you first called console.log(). Then data was updated and hence on console too. See issue

In order to see real data I prefer this:

console.log(JSON.parse(JSON.stringify(this.bsModalRef)));

2. Seems there is issue with bsModalRef. You can access content via:

setTimeout(() => { console.log(this.bsModalRef.content), 0});

But it is a workaound. You should report this to ngx-bootstrap repository.

Answer 2

My question is, how do I access that data in the list property from the constructor? That object has properties that I need to populate a form I have in the modal.

The proper way to access data is within ngOnInit lifecycle hook method .

title, whatYouWantToDelete and list data would be present within ngOnInit; you don't need to access it via bsModalRef instance. Try this:

ngOnInit() {
  console.log(this.list);
  console.log(this.whatYouWantToDelete);
  console.log(this.title);
}

Edit:

Since this.list is an array of array as per the screenshot, it means that user is an array within ngFor. Try user[0]?.caseId