Angular Material - Mat-Dialog - change background blur / darkening effect

Question

Hello my beloved community,

Using angular with angular material.

With the default configuration when you open up a material dialog, it darkens the background a bit. Now I would like it to be a blurred background instead. I tried playing around with the css styles but I could not get the background of the window to change (couldn't get the right selector inside of component template).

I went through the documentation but there is nothing there. I can play a little bit more with the styles since I am sure there is probably some tricky way but considering the darkening effect is already there out of the box I would assume there should be a theming feature available out of the box as well. What you think?

Answer 1

I guess you've missed the property MatDialogConfig - backdropClass in the docs.

Check this StackBlitz DEMO for a simple example

From this DEMO:

dialog-overview-example.ts:

openDialog(): void {
  const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
    width: '250px',
    data: {name: this.name, animal: this.animal},
    backdropClass: 'backdropBackground' // This is the "wanted" line
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
    this.animal = result;
  });
}

styles.css:

.backdropBackground {
  /* your css needs */
}

Answer 2

The given answer by @benshabatnoam is absolutely correct, but the documentation also has another option to disable the backdrop altogether.

hasBackdrop

Here is an example:

https://stackblitz.com/edit/angular-ei9hdv