I'm trying to create a background color that will persist on all of the components in my Angular app.
When I target html background: blue in the styles.css (global style sheet) this works if I change the encapsulation on the app.component.ts to ViewEncapsulation.Native, however it covers every component in the app. Meaning the color is on top of every other component.
I just want to set a background color that that will be behind all components in the app and persist.
I had the same problem and fixed with this. I do not know if is the best approach, try to put into the body tag in index.html:
<body class=".." style="background:#E8EBEE;">
Go to your Style.css or Style.scss file and add this code:
body {
background: #EEE //Your Background Color that will be shown between all components even if the component fails to load.
}
Import Renderer2 as follow:
import { Component, OnInit, Renderer2 } from
'@angular/core';
And If you want to add a custom background when a component being use, you will have to go to your component.ts File and add this code to the constructor:
constructor(private renderer: Renderer2) {
this.renderer.setStyle(document.body, 'background',
'#FFF');
}
That code will apply a background color to the body only when this component is loaded.
