0

I have 2 components (1 dialog per component), and i want to have an dialog with opacity: 0, and another dialog with opacity: 1. I used this:

::ng-deep {
  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: 0;
}

but it also affects the other mat dialog. What can I do?

Elisei Nicolae
  • 293
  • 2
  • 12

1 Answers1

1

As you open a dialog using the open method, you can add configuration to the dialog you want to have. You can see all the available MatDialogConfig properties here - https://material.angular.io/components/dialog/api.

In this case, you can create your custom backdrop class by adding it to the config.

let dialogRef1 = dialog.open(MyDialogComponent, {
  backdropClass: 'backdrop-class-name-1'
});

Then you can use ng-deep to add the stylings that you want.

::ng-deep {
  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    .backdrop-class-name-1 {
      opacity: 0;
    }
  }
}

Then for the other dialog, you just need to change the name of the backdropClass.

let dialogRef2 = dialog.open(MyDialogComponent, {
  backdropClass: 'backdrop-class-name-2'
});

Then apply the styles

::ng-deep {
  .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    .backdrop-class-name-2 {
      opacity: 1;
    }
  }
}

In this way, the two dialogs won't affect each other using ng-deep.

Dmitry S.
  • 1,544
  • 2
  • 13
  • 22