Close the modal dialog after x seconds.

[thecodemonk]

Is there a way to timeout a modal dialog? For example, I want to pop up a modal dialog that the user can respond to, but if they do not respond after a certain number of seconds, it closes and performs a default action. I've created a component for my dialog, but I can't seem to figure out how to close the dialog from within that component.

[360disrupt]

I have a similar question, I want to trigger closing the modal either from the component which opened the modal or from the dialog component (doesn't matter).

The timeout is just an example, I want to close it later with a subscription to a WebSocket.

I tried this in the opening component:

  openRebootModal(parentSelector?) {
    const closeDialogSubject = new Subject<void>();
    this.modalDialogService.openDialog(this.viewContainer, {
      childComponent: RebootModalComponent,
      settings: {
        closeButtonClass: 'close theme-icon-close'
      },
      closeDialogSubject
    });
    console.log('CLOSE TO');
    setTimeout( () => {
      console.log('CLOSE');
      closeDialogSubject.next(null);
    }, 1000);
  }

[treeindev]

To close a dialog from the modal body (not the header or footer) you can use the closeDialogSubject. This can be set on the service while opening the modal:

this.modalDialogService.openDialog(
     container,
     {
           childComponent: MyCustomModalComponent,
           closeDialogSubject: new Subject()  <-- here
     }
);

Then you can set a custom method on the component that should call a next() on the subject. This will close the modal from the internal component itself. Example:

export class MyCustomModalComponent implements IModalDialog {
    closeSubject: Subject<void>;

    dialogInit(reference: ComponentRef<IModalDialog>, options: Partial<IModalDialogOptions<string>>) {
        this.closeSubject = options.closeDialogSubject;
    }

    closeMe() {
        this.closeSubject.next();   <-- close modal from custom method.
    }
}

It is simple to close modal after X seconds using a Timeout before the next():

closeMe() {
    setTimeout( () => {
        this.closeSubject.next();   <-- close modal after 1 second.
    }, 1000);
}