Angular Material Dialog return value

Question

I have a following dialog component (which I open using dialog.open(MyDialogComponent) in another component):

export class MyDialogComponent implements OnInit {
  constructor(public matDialogRef: MatDialogRef<MyDialogComponent>) {}

  ngOnInit() {}
}

I know I can return any data to the calling component by executing matDialogRef.close(dataToReturn) bound to a button in dialog component. But how can I return the data if a user clicked elsewhere but the popup to close it?

Answer 1

If anybody is interested I found a solution (not sure if it is the best one). Just disabling the default close operation so the popup does not close on backround click, while closing it with data param on background click.

matDialogRef.disableClose = true;//disable default close operation
matDialogRef.backdropClick().subscribe(result => {
  matDialogRef.close(dataToReturn);
});

This way the calling component receives the data whether the dialog was closed by button or clicked elsewhere.

Answer 2

Call the close(dataToReturn) in the beforeClosed() to set the dialog result:

constructor(public matDialogRef: MatDialogRef<MyDialogComponent>) {
    matDialogRef.beforeClosed().subscribe(() => matDialogRef.close(this.dataToReturn));
}

This will work if the dialog is closed by clicking on the backdrop, or pressing the ESC.

Answer 3

    //In dialog component.
    dataYouWantToReturn = true; //set data.
            
    this.dialogRef.close(dataYouWantToReturn); 
               
    //In component calling the dialog component.
    dialogRef.afterClosed().subscribe(result => {
        if (result) {
            console.log("Result is TRUE!");
        }
    });

You can also pass json objects such as below:

    //In dialog component.
    dataYouWantToReturn = {success: true, message: 'Result is TRUE!'}; //set data.
            
    this.dialogRef.close(dataYouWantToReturn); 
               
    //In component calling the dialog component.
    dialogRef.afterClosed().subscribe(result => {
        if (result.success) {
            console.log(result.message); //"Result is TRUE!"
        }
    });

   

Answer 4

Here's a solution that will return default value if no other value has been provided. Works with both backdrop and Esc clicks:

constructor(public dialogRef: MatDialogRef<DialogComponent>) {
    // return 'Cancel' when backdrop or 'Esc' clicked
    dialogRef.beforeClosed().subscribe(
       result => dialogRef.close(result ?? DialogResult.Cancel));
 }
    
  onYesClicked() {
    this.closeDialog(DialogResult.Yes);
  }

  onNoClicked() {
    this.closeDialog(DialogResult.No);
  }

  private closeDialog(result: DialogResult) {
    this.dialogRef.close(result);
  }

 export enum DialogResult {
   Cancel = -1,
   No = 0,
   Yes = 1,
 }