'How to change whole page background-color in Angular

I am trying to change the background color for the whole page in Angular(would use body, or html tag when working without framework). and I can't find the best practice for this, I want it to be within the framework if possible since I am building an application for years to come.

cssangularbackground-color


Solution 1:[1]

You can do this from any of your component. For example:

export class AppComponent implements AfterViewInit {
    constructor(private elementRef: ElementRef) {}
    ngAfterViewInit() {
        this.elementRef.nativeElement.ownerDocument
            .body.style.backgroundColor = 'yourColor';
    }
}

By using this.elementRef.nativeElement.ownerDocument, you can access the window.document object without violating any angular convention. Of course, you can directly access the document object using window.document but, I think it would be better to access it through ElementRef .

Solution 2:[2]

If you are using angular-cli.
There should exist a global style file.

  • src
    • app
    • assets
    • environments
    • index.html
    • styles.css

In there you should be able to put your style e.g. html { background-color: black; } to effect the whole page.

Solution 3:[3]

Generally speaking, using ElementRef could make your app more vulnerable to XSS attacks. Refer to this official Angular doc for more information.

Also, setting a global style in your styles.css file, as Andresson has suggested, might not solve your problem if you are working with multiple components which have their own Shadow DOMs.

Here's a safer solution to your problem, using View Encapsulation.
Set View Encapsulation to None (don't forget to import) in your app.component.ts:

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})

Next, go to your app.component.css file and simply add your background color:

body {
  background-color: green;
}

This change will affect your app globally. Read more about it here.

Solution 4:[4]

not sure why it's not mentioned, but adding this to the global css file works perfectly:

body { background-color: red !important; }

Solution 5:[5]

The following solution is another alternative that I came across while I was facing the same problem. For the application to be more adaptable on different platforms we can use Renderer2 class provided by Angular as a service like this:

export class AppComponent {

constructor(private el: ElementRef, private renderer:Renderer2){}

  ngAfterViewInit(){

this.renderer.setStyle(this.el.nativeElement.ownerDocument.body,'backgroundColor', 'yourchoice color');

}

}

More details regarding Renderer2 and its methods can be found here: Render2_Description

Solution 6:[6]

you may also want to reconcider font color

body
{
  background-color: black !important;
  color:greenyellow;
}
h1
{
  color: aquamarine;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ℛɑƒæĿᴿᴹᴿ
Solution 2 Andresson
Solution 3
Solution 4 Rick
Solution 5 Janith Udara
Solution 6 Nusret Onur Ayduman

Related Questions