9

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?

enter image description here

5 Answers 5

39

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 */
}
4
  • Thanks @benschabatnoam, that's exactly what I was looking for. I don't know how I could have missed it in the documentation, it's right at the top.
    – qubits
    Mar 12, 2019 at 7:31
  • can we use this class for making background blur using opacity Sep 21, 2020 at 13:03
  • @Darshantheerth sure you can, I've updated the stackblitz sample to show you how to use the correct css Sep 22, 2020 at 17:02
  • I had to set hasBackdrop: true in v 11
    – AlignedDev
    Aug 5, 2022 at 18:55
6

You can achieve a nice effect by combining opacity and blur. Do like this:

Add backdropClass to your dialog-options:

backdropClass: "bdrop"

And these rules to your stylesheet:

.bdrop {
    background-color: #bbbbbbf2;
    backdrop-filter: blur(4px);
}

Demo: https://angular-blurred-dialog-backdrop-zdyvpc.stackblitz.io/

4

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

1
  • Thank you, looks like current angular material has backdrop disabled by default. Oct 16, 2022 at 23:46
1

Also you can just overide class .mat-dialog-container {} in your styles.scss

.mat-dialog-container {
  box-shadow: 0px 11px 15px -7px rgb(0 0 0 / 20%), 0px 24px 38px 3px rgb(0 0 0 / 14%), 0px 9px 46px 8px rgb(0 0 0 / 12%);
  background: #fff;
  color: black;
}
0
const dialogConfig = new MatDialogConfig();**strong text**
dialogConfig.id="dialog"
this.dialog.open(CreatOrderComponent,dialogConfig)

// you can give it an ID then you can use that id to style it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.