Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

sending parameter to onHide event in ngx-bootstrap modal

I am opening a modal using component as a template, everything is ok, modal opens and I am subscribing to onHide Event, subscription works also.

but I have a challenge here, I want to send a specific reason for example: 'message added successfully' as the reason . how can I do that? how can I send a specific string as a reason?

currently, I am trying to set a value in MessageAddComponent component and access it in parent component using bsModalRef.Content, but it is not a good idea.

newMessage() {
    this.bsModalRef = this.modalService.show(MessageAddComponent, {
        class: 'modal-lg'
    });
    this.subscriptions.push(this.modalService.onHide.subscribe((reason: string) => {
        // i dont like this approach
        if (this.bsModalRef.content.anySuccessfulAction) {
            console.log('foo and bar')
        }
        this.unsubscribe();
    }));
}
like image 217
Arash Avatar asked Nov 13 '17 08:11

Arash


3 Answers

To simplify your subscription you can create "onetime" subscription via .take() or first() operator:

this.modalService.onHide
    .pipe(take(1))
    .subscribe(() => {
        console.log(this.bsModalRef.content)
    });
like image 170
Ihor Bilobran Avatar answered Oct 23 '22 15:10

Ihor Bilobran


found solution finally:

inject BsModalService in the component that is used as modal and then set dismiss reason as bellow

this.modalService.setDismissReason(theReason);
like image 43
Arash Avatar answered Oct 23 '22 15:10

Arash


Good solution put together:

this.modalService.onHide.pipe(take(1), filter(reason => reason === 'yourReason')).subscribe(() => {
    // Do anything here, this will get called only once
});

And then in your modal before hiding your modal:

this.modalService.setDismissReason('yourReason');
like image 2
Bartando Avatar answered Oct 23 '22 14:10

Bartando