feat(modal): pass custom data to the hide() method in Modal

[corn-code]

Could you please explain how to pass custom data to the hide() method this.dynamicModal.hide(data);

[IlyaSurmay]

There's no such possibility for now. Can you explain why do you need it?

[corn-code]

Yes. Let's imagine that we have a next snippet of code:

<button (click)="onDelete()">Delete</button>

class Project {
     onDelete() {
       this.dynamicModal.show();
      // I want to get data array here from the method hide()
     }
}

In modal component, I want to transform some data and return this value to the class Project

class MyModalComponent {
     public data = [];
     first() {
       this.dynamicModal.hide(data.filter(x => isPositive(x)));
     }
}

Does it clear?

[adrianolsk]

I also need this.

I do some work in the modal and when it closes I need to refresh the data in the component that called the modal. But I need to know when the user closed or finish the task and are done. Would be nice to have another method that close with parameters modalRef.close(somedata);

But I just solved the problem passing a function to the modal. and Call it with parameters when I am done, and closing the modal in the parent component @CornCodeCorp check it out

this.modalRef = this.modalService.show(MyModalComponent);
this.modalRef.content.onClose = (myData) => {
      // Do something with myData and then hide
      this.modalRef.hide();
};

and in the modal:

onClose: any;

close(){
      this.onClose({ value: 100})
}

[ctrl-brk]

You can declare your modal in the same template as your component and share everything.

[corn-code]

My idea is to create one general ModalComponent in the root of application and call this component via ModalService in any places. Also, ModalService accepts one of my components for loading dynamically in the ModalComponent.

[faizalshap]

You can set DismissReason before closing the popup. this._modalService.setDismissReason('Yes');

And then, this._modalService.onHide.subscribe((result) => { if (result === 'Yes') { //do something... } }

[corn-code]

@faiz2rock Thank you. I found the same solution. this._modalService.dismissReason = JSON.stringify({x: 1, y: 2})

[NenadJovicic]

+++ for this You should make something like Angular Material 2 Dialog And to make bsModalRef for every new modal created as component so you can subscribe on closing specific modal that is created as component

[biosis21]

Buy the way, you can do the same flow as in native <dialog></dialog> element and API provided with him. https://www.instagram.com/p/BYl-j_RjFAs/?taken-by=corn.code

[kahboom]

I need this for the show() method for popovers as well, similarly to how ng-bootstrap allows. An example is to be able to pass data more easily when developing plugins for third-party libraries that want to use ngx-bootstrap.

[piernik]

I need that option too. Best solution is this.modalRef.hide(myValue); and then

   this.modalService.onHide
      .pipe(
        take(1)
      )
      .subscribe(resp => {
        if (resp !== null) {
        }
      });

reason should be moved somewhere else in my opinion

[WuglyakBolgoink]

How can I return data from modal if I use only component-based show() in Service?

Update: Ok... With some trick we can pass data back.

From modal component in close() just add modalService.setDismissReason(any) before hide():

this.bsModalService.setDismissReason(JSON.stringify{
            mode: 'closed',
            data: [ 1, 2, 3 ]
}));
this.myModal.hide();

[devel112]

Also unable to reliably get return value from the actual modal - not enough to generally use the service to listen for any modal to close as there may be many. How do i find out if my specific modal has closed with f. eks ESC?

[JIBIN-P]

Why isn't modalService.setDismissReason mentioned anywhere in the modal API documentation? Also, I would like to contribute to the documentation can you tell me where is the documentation located in this repo.

[matheussouza9]

I solved the problem this way

Service

export class ModalService {
    constructor(private _modalService: BsModalService) { }

    openModal<T>(component: T, config?: ModalOptions): Promise<any> {
        return new Promise((resolve, reject) => {
            const modalRef = this._modalService.show(component, config);
            this._modalService.onHidden.subscribe((reason: string) => {
                resolve(modalRef.content)
            })
        })
    }
}

Modal Component

export class ErrorComponent {
    data = {}

    constructor(public bsModalRef: BsModalRef) { }

    closeModal(): void {
        this.data = { a: 1, b: 2 }
        this.bsModalRef.hide();
    }
}

Component that shows modal and needs receive some data after modal is hidden

this.modalService.openModal(ErrorComponent).then(
    (content: ErrorComponent) => {
        if (content.data) {
          this.reloadData(content.data)
        } 
    }
)