Angular Material Dialog return value Angular Material Dialog return value angular angular

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