How to change whole page background-color in Angular

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.

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 .