Ngx-bootstrap: Modal Promise?

[carlhussey]

Is there a way for the modal to provide data back from the modal to wherever it was invoked from?

For example, I am calling this._modalService.show(ConfirmExistingVersionModalComponent); in my parent component. After something is done in the modal ConfirmExistingVersionModalComponent, I would like to send the data back to the parent (where it was called from) so it can run a method based on the data it has received.

I know this can be done with creating a subject / observable to hold the data but was curious anything was built in that I was missing.

An example from another modal package out there is something like the following:

let mod = this.modal.alert()
            .size('lg')
            .showClose(true)
            .title('A simple Alert style modal window')
            .body('modal content')
            .open();

mod.then((resultPromise) => {
            resultPromise.result.then((result) => {
                this.result = result;
            }, () => this.result = 'Rejected!');
        });

[valorkin]

I was thinking about promises, but this is not good enough. What if you want to prevent modal closing from component, which opened modal? And promise already resolved, most probably it will be behavior subject, so you have a channel between modal and opener.
In short, something like this will be added soon

[carlhussey]

Thank you!

For now I was able to solve it it by subscribing to the modal ref when opening it.

Parent:

import 'rxjs/add/operator/take';

.....

this._bsModalRef = this._modalService.show(AddAttributeModalComponent);
this._bsModalRef.content.action.take(1).subscribe(this.addAttribute.bind(this));

addAttribute(data){
   console.log('modal data', data); // hi
}

Child (Modal):

action: EventEmitter<any> = new EventEmitter();
...
modalSaveButton(){
   this.action.emit('hi');
}

[valorkin]

it's a part of roadmap, and there are even PR with WIP for ModalService v2

[jscharett]

Any update here. For my project, we use both Ngx-boostrap and Ng-bootstrap. would like to move to just Ngx-bootstrap, but not having a built in response structure seems limiting. The problem with the above workaround is each modal will have to implement an EventEmitter. Further, the parent component will be biding directly to the child modal vs interacting with just the service/modalRef.

[Et3rnal]

I needed this today I spend a few hours to create a service with a promise (confirm modal) but I was able to get it to work as intended so I ended up just using a subject and subscribe to it without the service.

However, I found this now and there might be a solution in one of the answers
https://stackoverflow.com/questions/46408428/ngx-bootstrap-modal-how-to-get-a-return-value-from-a-modal

I didn't try it yet but it looks just right and what I was missing.