CODEWITHSUNDEEP
angularbootstrap-modalngx-bootstrap
Greg
Greg

Reputation: 6623

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

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?

Upvotes: 6

Views: 11659

Answers (3)

Pian0_M4n
Pian0_M4n

Reputation: 2548

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.

Upvotes: 3

Miguel Peguero
Miguel Peguero

Reputation: 488

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

Upvotes: 0

Vasiliy Mazhekin
Vasiliy Mazhekin

Reputation: 688

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

Upvotes: 5

Related Questions