md-dialog Before close functionality?

[vapits]

Bug, feature request, or proposal:

Feature?

What is the expected behavior?

When user clicks on backdrop or esc the dialog closes. It would be nice to give the user the option to intercept this close method and prevent default behavior based on some condition.

What is the use-case or motivation for changing an existing behavior?

For example if Dialog contains a form, to be able to disable close or display a message (or whatever function he/she wants to run) and prevent the modal from closing.

[willshowell]

Duplicate of #4647.

For your use case specifically, see #4647 (comment) and #3460.

[vapits]

@willshowell so comment mentioned doesn't match the next issue. Will the PR mentioned be a part of one of the next releases?

[willshowell]

beforeClose (#4647) will eventually be implemented to give users the ability to respond immediately instead of waiting for the animation to complete. However, it won't allow cancelling the close.

So in order to cancel the close (e.g. to show a message when the form needs to be saved or whatever), you would have to pass disableClose to the dialog. Then you would be able to subscribe to backdropClick and escapeKeyEvent streams to show the message or close the dialog on your own.

Those two streams are not yet available and that's what #3460 is all about (particularly the last ~5-6 comments). However, once #6330 is completed, that will be easy work to make them part of the dialog's public api.

In summary, I doubt they'll be in the next release, but probably in the following 1-2.

[jelbourn]

Duplicate of #4647

[dfmmalaw]

@willshowell I am new to Angular but I was wondering if you could provide a fiddle showing how you would do the following:

"So in order to cancel the close (e.g. to show a message when the form needs to be saved or whatever), you would have to pass disableClose to the dialog. Then you would be able to subscribe to backdropClick and escapeKeyEvent streams to show the message or close the dialog on your own."

[willshowell]

@dfmmalaw this won't be available until #6682 lands. It could look like this:

const dialogRef = dialog.open(MyDialogComponent, {disableClose: true});

const escapeEvents = dialogRef.keydownEvents().filter(e => e.key === 'Escape');

Observable.merge(escapeEvents, dialogRef.backdropClick())
  .map(() => confirm('Are you sure you want to cancel?'))
  .filter(confirmed => !!confirmed)
  .first()
  .subscribe(() => dialog.close());
  

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}