How to close a mat dialog without a backdrop on clicking outside?

Question

How Can I close the dialog in this stackblitz example (Minimal, Reproducible Example.) by clicking outside ?

This works fine if I remove the property hasBackdrop: false -> Working Stackblitz Example

Answer 1

The standard approach for creating an Angular Material Dialog that closes when clicking outside the dialog box (while creating the appearance that there is no backdrop) is to use the built-in library CSS class cdk-overlay-transparent-backdrop and apply it using the MatDialogConfig property backdropClass.

The openDialog method would be:

openDialog(): void {
  const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
    backdropClass: 'cdk-overlay-transparent-backdrop',
    hasBackdrop: true,
    width: '250px'
  });
}

See Stackblitz Example