How to Change Whole Page Background-Color in Angular

How to change whole page background-color in Angular

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 .

full page background color angular

in projects generated with the angular-cli you should have a styles.css (scss if you chose sass on generating the project) directly in src/styles.css

if you add the following css to it, the background will be styled accordingly:

body {
    background-color: lightblue;
}

good luck!

@edit:

the reason, you cannot style the body tag from within a component's css file is the shadow dom. the shadow dom ensures, that the styles are specific to the according component which most of the time is useful (if you want to use the same class name for different styling rules of different components)

the following page might clarify things a bit more for you:
https://angular.io/docs/ts/latest/guide/component-styles.html#!#special-selectors

Angular 6: How to change page background-color dynamically

use render2 and set class to body using document object

app.component.ts

constructor(private renderer: Renderer2) {
this.renderer.addClass(document.body, 'body-class');
}

Note: if you are toggling classes, just remove previous class before assigning new class

How do I change the whole page background color with each route using React?

I think you can use this as well

    function App() {
    
      const [color, changeColor] = useState("#282c34");

      document.body.style.backgroundColor = color;
      
      return (
        <div>
          <Router>
            <div>
              <nav>
                <ul>
                  <li>
                    <Link to="/" onClick={() => changeColor("#282c34")}>
                      Home
                    </Link>
                  </li>
                  <li>
                    <Link to="/about/" onClick={() => changeColor("#9c27b0")}>
                      About
                    </Link>
                  </li>
                  <li>
                    <Link to="/users/" onClick={() => changeColor("#007bff")}>
                      Users
                    </Link>
                  </li>
                </ul>
              </nav>
              <Route path="/" exact component={Index} />
              <Route path="/about/" component={About} />
              <Route path="/users/" component={Users} />
            </div>
          </Router>
        </div>
      );
    }

How to give an angular 8 component body a background-color?

This fixed it for me

:host {
 display: block;
 background-color: green;
}


.home-container {
color: var(--col-pale);
height: 100vh;
font-family: "roboto-reg";
overflow-y: hidden;
}

@saget Thank you for your help!

Background does not take the whole page Angular CSS

Your background-color: red only applies to your div, which has a height of whatever total height of the elements within it by default. In order to take place of the entire page you just need to set the height to 100vh

.back {
  height: 100vh;
  background-color: red;
}

How to change the background color of the outermost body tag with Angular

There is an easier way in your component

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    constructor() {
        document.body.style.background = 'rgba(0, 0, 0, .6)';
    }

}

Or with simple CSS in your src/styles.css

body {
    background: whatever;
}

Angular 7 - Change background colour of component

:host {
    background: blue;
}

You should read some docs on Component styling, especially View Encapsulation
This mecanism ensure that style defined only apply to the component and do not "leak" around.

---

Related Topics