How to change the background colour of different components in Angular2?

Question

In an Angular2 app, there is a problem I keep encountering, i.e, setting the background colour or image of a page. In the app, if I mention a particular colour in the styles.css for the background then that colour is applied for all the pages I develop, since it applies the styles globally. Now If my login page is blue in colour and I want to change the background colour of my home page to white, how do I go about doing that? Because in the component Homepage we have : homepage.component.html and homepage.component.css . In homepage.component.css, the css only affects the elements of the homepage. I cannot change the colour of the entire page or add an image as a background for the entire page either since body { ... } will not work there. Neither does @import url work.

How can I change the background colours of different components in an Angular2 app?

Any help would be greatly appreciated. Thanks.

Answer 1

Here is an other solution. It is maybe a little basic,restrictif or hacky, but it works:

style.css

 body, html {
   padding: 0;
   width: 100vw;
   height: 100vh;
   ...
 }

.my-container{
  width: 100vw;
  height: 100vh;
  ...
}

home.component.css

.my-container{
    background-color: red;
 }

home.component.html

<div class="my-container">
   ...
   /* the content of your component here */
</div>

login.component.css

.my-container{
    background-color: blue;
 }

login.component.html

<div class="my-container">
   ...
   /* the content of your component here */
</div>

and so on.

Answer 2

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

@Component({
  encapsulation: ViewEncapsulation.None,

})

To override the styles in the styles.css and specify specific styes for the compoenent add ViewEncapsulation as none into your component and import the right class, it will work.

Answer 3

You can use the :host selector to apply styles in the host component’s template, the one that is parent to the current component. In your component's css, try this:

:host .my-app-class {
    background-color: white;
}

Answer 4

this is my solution.

style.css

.login-page {
    height: 100%;
      background-repeat: no-repeat;
      background-image: linear-gradient(rgb(104, 145, 162), rgb(12, 97, 33));
}

login-home.component.ts

keep the eye in the OnInit and OnDestroy functions

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

@Component({
  selector: 'app-login-home',
  templateUrl: './login-home.component.html',
  styleUrls: ['./login-home.component.css']
})
export class LoginHomeComponent implements OnInit, OnDestroy {
  // Search the tags in the DOM
  bodyTag: HTMLBodyElement = document.getElementsByTagName('body')[0];
  htmlTag: HTMLElement = document.getElementsByTagName('html')[0];

  constructor() {

  }

  ngOnInit() {
    // add the css-style to the html and body tags
    this.bodyTag.classList.add('login-page');
    this.htmlTag.classList.add('login-page');
  }

  ngOnDestroy() {
    // remove the the body classes
    this.bodyTag.classList.remove('login-page');
    this.htmlTag.classList.remove('login-page');
  }

}