White Background Dialog in Angular

I am struggling to change the default white background of my webpage. Is there a way I can use CSS to blur or darken the background instead? I tried applying CSS code but couldn't locate the correct class. I also attempted setting the "hasBackdrop" attribute to false, but it had no effect.

https://i.sstatic.net/ACIDl.png

CSS Code

::ng-deep .mat-dialog-container {
    background-color: #fff;
    color: #fff;
    overflow: hidden;
}

p {
    color: black;
}

HTML

<p>test-modal works!</p>

Code to call the modal

export class CallModalComponent implements OnInit {

  constructor(public dialog: MatDialog) { }

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

  ngOnInit(): void { }

Answer №1

You have the option to customize dialog backgrounds and backdrops by adding classes through the open config parameter.

const dialogRef = this.dialog.open(DialogContentExampleDialog,{
  backdropClass:'backdrop-bg-orange',
  panelClass:'bg-blue'
});

style.scss

.bg-blue .mat-dialog-container{
  background: lightblue;
}

.backdrop-bg-orange {
 background: orange;
}

It is crucial to add these classes in the global style file, as Angular's ViewEncapsulation restricts component-specific styles from affecting the entire application.

Check out the StackBlitz demo 🚀

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Which elements should I focus on when utilizing Media Query?

For the width specified in the CSS for various tags within my HTML, do I need to individually list each tag when setting CSS for a Media Query? If so, how can I do this while maintaining the same ratio for full screen? <!DOCTYPE html PUBLIC "-//W3C//DT ...

Inputting Dates Manually in the Angular Material Datepicker Field

The datepicker function works well unless I manually type in the date. When I input a date between 01.MM.YYYY and 12.MM.YYYY, the value switches to MM.DD.YYYY. However, if I input 16.09.2021 for example, it remains as DD.MM.YYYY. Is there a way to change ...

How can I arrange images vertically instead of placing them side by side?

I need help figuring out how to display multiple images in a vertical format instead of horizontally in the code below. The images are wide and take up too much space if shown side by side. My coding skills are basic, so specific guidance on where to mak ...

Customize your Kendo Chart in Angular2 by selecting the axis for your data

I need help creating a scatter chart with two separate datasets that have different Y-Axis How can I make sure the second series uses the second Y-Axis in the chart? <kendo-chart [title]="" style="height:290px"> <kendo-chart-series> < ...

Adjust the color of the entire modal

I'm working with a react native modal and encountering an issue where the backgroundColor I apply is only showing at the top of the modal. How can I ensure that the color fills the entire modal view? Any suggestions on how to fix this problem and mak ...

Guide on linking an Angular2+ app with an external API

Can anyone provide guidance on how to integrate an external API with authentication (username and password) into an Angular Application? I am comfortable connecting to APIs that don't require authentication, but I am facing difficulties with APIs that ...

Comparing values between two JSON objects in Angular 8: A guide

I need to compare the values of two objects, obj1 and obj2, by ignoring keys that are missing in either object. If all key-value pairs are equal, return false; otherwise, return true. For example: If 'id' is present in obj1 but not in obj2, it s ...

The current inquiry does not conform to the MultipartHttpServletRequest format

I've been encountering an error while trying to send both an image and an object from Angular to Spring Boot. The error message I keep receiving is: Current request is not of type [org.springframework.web.multipart.MultipartHttpServletRequest] Below ...

Place information from an input field into a specific row within a table

Utilizing Angular 4, I am developing a frontend application for a specific project. The interface features a table with three rows that need to be filled with data from an external source. https://i.stack.imgur.com/Dg576.png Upon clicking the "aggiungi p ...

When I open my website in the browser, the bootstrap card-deck design is not being displayed correctly

I encountered a strange issue while designing my website. The code I wrote for the Bootstrap card-deck class in codeply.com was working perfectly fine. However, when I copied the same code into my PyCharm code editor and then pasted the file link into my b ...

Exploring how to utilize class properties within Angular templates

I am facing an issue with using a template property in Angular. Despite my attempts, it is not functioning as expected and I am unable to pinpoint the cause of the problem. To illustrate, I have set up a demonstration here: https://github.com/Fulkerson/an ...

Angular 2 - Directive fails to work if not properly imported into its module

Trying to use a directive across multiple modules in Angular can be tricky. If you declare it in a shared module and import that module into other modules, you might encounter errors. It seems like the directive only works when declared directly within the ...

Is Angular2 detecting changes based on value equivalence or reference equality?

I am currently working with Angular2-RC.1 and I've noticed a significant decrease in performance when setting up a component with a large dataset. The component I'm using is a tabular one (which involves Handsontable) and it has an Input property ...

Navigating with nginx

My Angular2 application works perfectly fine when using the local webpack dev server. However, after deploying the application on a server behind nginx, I am facing an issue. I can navigate using application links, but if I enter a URL directly into the br ...

Establish the lowest possible height for Angular Material Expansion Panel Content

Is there a way to specify a minimum height for the content of an Angular Material expansion panel when it is open? I have searched for examples on setting the expandedHeight and collapsedHeight for the header, but not for the content itself. The Angular Do ...

I recently made the switch to Angular 9.0 for my project, but when I ran the build using yarn, I encountered some warnings. Despite the

I encountered this issue on both Ubuntu 16.04 and 18. I have tried various solutions such as reinstalling yarn, node, and clearing the cache, but the warnings persist. For every build using a script, the node_modules folder is deleted and then reinstalled ...

Adjusting the size of the div both horizontally and vertically in Angular 5 using the mouse cursor

As a beginner in Angular 5, I am looking to achieve horizontal and vertical resizing of a div by dragging with the mouse pointer. Can someone assist me in implementing this feature? ...

The issue of cyclical dependencies in Ionic 2 and Angular 2

Currently utilizing Ionic 2 rc4. Facing an error caused by a cyclical dependency that I need help resolving. +-------------------------------------+ | LoginEmailPage RegisterPage | | ↓ ↓↑ | | ...

Styling menus with CSS

I'm struggling with a CSS issue while attempting to add a 1px solid black line after each element in my drop-down table menu. The current appearance of my menu is causing some trouble. What I desire for it to look like involves applying border: 1px s ...

Having difficulty resolving issues with the chat box (div) scroll bar staying fixed at the bottom

I am currently working on a chat application and I am facing an issue with fixing the scroll bar at the bottom of a div when loading my PHP file. I have already written a script to achieve this, but despite accessing it using CSS Id, I am having trouble ge ...