CSS Code To Remove Angular Material v5 Modal Backdrop

Question

I want to remove the backdrop on the modal, i know there is a hasBackdrop property when opening the modal but i only want to hide the backdrop based on some condition which will take place on the modal. So i was thinking I could do so with css but after inspecting element on the modal, I couldnt find anything relating to the backdrop's css.

Answer 1

I quite don't understand the question.

If what you need is maybe remove the shadow box of the dialog, just find the component which contains the dialog you need to work on, find it's style file and add this:

/deep/.mat-dialog-container {
  box-shadow: none;
}

More info of the usage of deep can be found on angular docs and more example of their usage here (stackoverflow's question) and on angular's blog website.

If what you need here is remove the backdrop then beforehand create a class like

.no-backdrop {
  background: none;
}

and add it to the function, which is used to create a dialog:

this.dialog.open(LoaderComponent, {
  backdropClass: 'no-backdrop',
});

You can also just add false as value to the field hasBackdrop like:

this.dialog.open(LoaderComponent, {
  hasBackdrop: false
});

as per default, the value is true.

More information can be found on angular material v5's webpage.

Hope it helps someone.

Answer 2

.mat-dialog-container has box-shadow, you can remove the box-shadow. For example you can add box-shadow: none; as an inline role or box-shadow: none !important; . Both will remove the box-shadow.

Answer 3

Try this:

In your .css/.scss file overwrite class

/deep/.cdk-overlay-dark-backdrop {
    background:none!important;
}

Answer 4

    this.dialog.open(ExpandedTableComponent, {
      maxWidth: '100vw',
      maxHeight: '100vh',
      height: '90%',
      width: '100%',
      hasBackdrop: false,
    });