Angular Material Dialog return value

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.


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.


    //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!"
        }
    });