Usage of [mat-dialog-close]

Since this caused confusion for a lot of developers: if you want to perform requests on close and/or trigger the close with a custom element (instead of a basic button), you can inject a reference to the dialog and then call .close:

constructor(public dialogRef: MatDialogRef<DialogComponent>) { } - replace DialogComponent with your component name

Then define a method on your component class and call it in your template:

async closeDialog() {
    try {
      await someAsyncThing();
      this.dialogRef.close(); // make sure it only closes if the upper async fn succesfully ran!
    } catch(e) {
      this.errorMessage = e.response.message;
    }
}

<fancy-ass-close-item (click)="closeDialog()"/>

As opposed to other answers here, this enables you to call requests before closing the dialog (and thus display an error message or something inside the dialog).

Set your button to have disabled on it if the form is not valid. This way the button cannot be clicked unless the form is valid, meaning it won't close unless the form is valid

<button type="submit" (click)="addUser()" mat-dialog-close [disabled]="formisvalid" mat-button>Submit</button>

Just to make the answer complete: mat-dialog-close will close your dialog if it's clicked, no matter what value you assign to it. If you want to control whether clicking it will close the dialog, use [disabled]="formisvalid" as [other answer] states.

However the value assigned to mat-dialog-close is not ignored. It's interpreted as the dialog result value, and as such can be read by the component that opened the dialog, by subscribing to dialogRef.afterClosed(). This behaviour is explained in the official documentation:

• https://material.angular.io/components/dialog/overview#dialog-content
• https://material.angular.io/components/dialog/api#MatDialogClose
• https://material.angular.io/components/dialog/api#MatDialogRef