How to change whole page background-color in Angular

Issue

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.

Solution

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 .

Answered By - asmmahmud