(question) How to get back results from a custom modal

[alfupe]

Hi there,

I'm opening a custom modal that have a model driven form that POST some data through a service then it closes itself when complete. It's working perfectly but I would love to get back some data to the modal's "opener" component.

Most probably I'm doing something wrong when I implemented the custom modal example here and there.

My original open function in the "opener" component was:

createNewArtist() {
  this.modal.open(ArtistCreateModal, overlayConfigFactory({}, BSModalContext));
}

After reading the issue #247 I modified it but obviously I always get back null as the result because it is not a confirm like in the example at #247.

createNewArtist() {
  const dialog = this.modal.open(ArtistCreateModal, overlayConfigFactory({}, BSModalContext));
  
  dialog.then(resultPromise => {
    return resultPromise.result
      .then(
         result => console.log('createNewArtist()', result),
         () => this.log.i('createNewArtist()', 'rejected')
      );
  });
}

The relevant code of the modal component is:

export class ArtistCreateModal implements CloseGuard, ModalComponent<BSModalContext> {
    context: BSModalContext;
    ...form group and form controls...

    constructor(
        public dialog: DialogRef<BSModalContext>,
        ...some other dependency injections (form builder, services, etc)...
    ) {
        this.context = dialog.context;
        dialog.setCloseGuard(this);
        ...
    }

    beforeDismiss(): boolean {
        console.log('before Dismiss');

        return false;
    }

    beforeClose(): boolean {
        console.log('before Close');
        // provisional tweak because .modal-open is not removed from body after modal close
        $('body').removeClass('modal-open');

        return false;
    }

    close() {
        this.dialog.close();
    }

    createArtist() {
        ...

        this.artistService
            .create(artistRequest)
            .subscribe(
                artistResponse => console.log('createArtist()', 'artistResponse', artistResponse),
                error => console.log('createArtist()', 'error', error),
                () => this.close()
            );
    }
}

I'm not extending BSModalContext as in the example because I don't need to pass data from the "opener" component to the modal. Should I?

What I would love to find is the way to get back some data from the modal to the opener. What I'm doing in the modal is building a form that insert data via service. I would like to return the service's response data to the "opener" component.

What I'm missing out? Could you help me please? A lot of thanks!

[alfupe]

Incredibly easy to solve! I didn't figure that this.dialog.close() could send a result back so the promise can catch it:

dialog.then(resultPromise => {
    return resultPromise.result
      .then(
         result => console.log('createNewArtist()', result),
         () => this.log.i('createNewArtist()', 'rejected')
      );
  });

The above promise will print the result sent on the service response:

createArtist() {
        ...

        this.artistService
            .create(artistRequest)
            .subscribe(
                artistResponse => {
                    console.log('createArtist()', 'artistResponse', artistResponse;
                    this.dialog.close(artistResponse); // <---- just there
                },
                error => console.log('createArtist()', 'error', error)
            );
    }

This question can be closed though I don't know if exists a better method to do that.

[PankajAS]

can you please provide me spec test for this?