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

Answer 2

There are many ways on how to achieve this. One would be listening on window clicks. Stackblitz

export class DialogOverviewExampleDialog {

  private inited;

  constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) { }

  ngOnInit() {
      this.dialogRef.afterOpened().subscribe(() => {
        this.inited = true;
      })
  }

  @HostListener('window:click')
  onNoClick(): void {
    if (this.inited) {
        this.dialogRef.close();
    }
  }

}

But I suggest you edit the css for the backdrop, so it remains invisible but the functionality stays.

.cdk-overlay-dark-backdrop {
    background: transparent;
}