feat(dialog): Pass an observable to the mat-dialog-close directive

[bampakoa]

Feature Description

It would be great if we could pass an Observable into the mat-dialog-close directive so that the dialog can be closed when the observable emits.

Use Case

In our codebase, we use many dialog components for filling up forms. These components usually have the following actions:

<mat-dialog-actions>
  <button mat-button mat-dialog-close>Cancel</button>
  <button mat-button (click)="save()">Save</button>
</mat-dialog-actions> 

The save method usually makes an HTTP POST request to a backend API and, when completes, it closes the dialog using the close method of the MatDialogRef service.

It would be awesome if we could avoid all the boilerplate code of using the MatDialogRef service which also adds a bit of noise in our constructors. Injecting MatDialogRef service as private dialogRef: MatDialogRef<MyComponent> quickly makes our constructor violate the max-line-length rule.

[crisbeto]

I'm not sure that this makes sense from an API standpoint, because passing in an observable to the button is no different than doing stream.subscribe(() => dialog.close()) yourself. We already have the APIs so that you can implement it yourself and tailor it to your app's needs. You can do something like this:

@Directive({
  selector: '[close-on-emit]' // Or alternatively you can target `[mat-dialog-close]`
})
class CloseOnEmit {
  @Input('close-on-emit') stream: Observable<unknown>;

  constructor(private _dialog: MatDialog) {}

  ngOnChanges() {
    // TODO: also needs to unsubscribe
    this.stream.subscribe(() => {
      const dialogs = this._dialog.openDialogs;
      if (dialogs.length) {
        dialogs[dialogs.length - 1].close();
      }
    });
  }
}

Closing the issue since the feature request is too narrow to build into Material.

[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.}