CODEWITHSUNDEEP
angulartypescript
user16435868
user16435868

Reputation:

How to change angular mat dialog backdrop color?

How do we change the backdrop or is that a background color behind the dialog ? same with the image below.

As you can see when the dialog is triggered it should change the background/backdrop like on the example image , any idea how to achieve this one ? as you can see it is a bit blurred.

enter image description here

#Code

activateUserDialog(status:string) {
    const dialogRef = this.dialog.open(UserActivationDialogComponent, {
      height: '288px',
      width: '600px',
      disableClose: true,
      data: {
        status: status,
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        if(status !== "Deactivated") {
          this.ActivateUserProfileStatus(this.data.id);
        }else {
          this.DeactivateUserProfileStatus(this.data.id);
        }
      }
    });
  }

Upvotes: 1

Views: 1397

Answers (1)

Apoorva Chikara
Apoorva Chikara

Reputation: 8773

You can add the class to your dialog and apply the style:

activateUserDialog(status:string) {
    const dialogRef = this.dialog.open(UserActivationDialogComponent, {
      height: '288px',
      width: '600px',
      disableClose: true,
      backdropClass: 'userActivationDialog' // add this line 
      data: {
        status: status,
      }
    });

    dialogRef.afterClosed().subscribe(result => {
      if (result) {
        if(status !== "Deactivated") {
          this.ActivateUserProfileStatus(this.data.id);
        }else {
          this.DeactivateUserProfileStatus(this.data.id);
        }
      }
    });
  }

In your style.css

.userActivationDialog {
    // add css here //change the color
    background-color: blue;
}

Upvotes: 1

Related Questions