Ngx-Bootstrap modal not refreshing data changes if shown from subscription

Question

I'm trying to open a modal from component and I'm calling the show method in response to another subscription if call it outside the subscription it works fine. But from subscription, the data passed to content is not being refreshed Below is an example of the code.

//Subscription
$subject.subscribe(res => {
  const bs_modal = this._bsModalService.show(ComponentA);
  bs_modal.content.data = res;

  this._bsModalService.onHide.subscribe(() => {
     console.log(bs_modal.content.res_data));
  })

})

// Modal Component
@Component({
  selector: 'app-modal',
  template: `
     <div>{{data | json}}<div>
     <button (click)="hideModal()">Hide Me</button>
  `,
})

class ComponentA {
  data: any;
  res_data: any;
  constructor(_bsModalRef: BsModalRef) {}

  hideModal() {
    this.res_data = 'Testing';
    this._bsModalRef.hide();
  }
}

On Modal Open the data is empty and whenever I close modal the res_data is also undefined

Answer 1

I have recreated your code in a stackblitz and I am able to pass data into the modal after tweaking a few things: https://stackblitz.com/edit/angular-37iw9w

Ensure these things:

• You have exported componentA class.
• You have imported ModalModule.forRoot() in your module.
• You have added componentA to the declarations array in your module.
• You have added componentA to entryComponents array in your module.

This is under the presumption, based on the code samples you have given, that they are belong in one module.