ngx-bootstrap modal - access data passed into modal via bsModalRef.content

Question

I am using angular 4 and ngx-bootstrap to open modals. All is working well, and I implement modals via a component. I can also pass data into the modal via the content property of the bsModalRef. Like so:

this.bsModalRef = this.modalService.open(MyComponent);
this.bsModalRef.content.somedata = [...some array of products];

This all works great, and my modal can then access a property called somedata. Fantastic. The issue that I'm having is that I want to perform some calculation on somedata. Assume somedata were a list of products with an amount, and I want the modal to reduce the amount down to a single value. How do I know when that data is available in the modal class? I can use a setTimeout hack, which works, but makes me feel icky inside. Is there some kind of lifeCycle hook like ngOnChanges that ngx-bootstrap implements so I can know when a data property gets set, and further, when it changes?

Answer 1

You can implement setter, or method

public set somedata(val) {
    // here you process data
}

Keep in mind that this.bsModalRef.content consists all the public members of the dialog component (in your case MyComponent).

Answer 2

on Parent component

import { Modal, BSModalContext } from 'ngx-modialog/plugins/bootstrap';
import { overlayConfigFactory } from 'ngx-modialog';

var dataObject = {data1: "ba vbal", data2 :"bla bla"};
this.modal.open(urmodalCpmponent, overlayConfigFactory({data: dataObject}, BSModalContext))

on Modal Component

import { DialogRef } from 'ngx-modialog';

constructor(public dialogRef: DialogRef){
let context:any = dialogRef.context;
this.detail = context.data'
}

Answer 3

A better way is to use initialState and pass what you need

this.bsModalRef = this.modalService.open(MyComponent, {
 initialState: {
     products: [...some array of products]
 }
});

Make sure that you have a products array in MyComponent

export MyComponent {
    public products: any[];
}

@Edit: As for version 2.0.3 this way is not working and should not be used (even though it is referred in documentation). Please, refer to this issue until further noticed.