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
Hiding the Scroll Bar on an HTML Page
How to Remove the Stripes That Appears When Using Linear Gradient Property
Css Display: Inline VS Inline-Block
Custom CSS Scrollbar For Firefox
What's So Bad About In-Line Css
Border Gradient With Border Radius
Using Only Css, Show Div on Hover Over Another Element
Why Aren't My Grid-Template-Areas With Ascii Art Not Working
Stretch and Scale a CSS Image in the Background - With CSS Only
How to Select a Range of Elements in Repeated Pattern
Css Child VS Descendant Selectors
Remove White Space Below Image
How to Make Background-Size Work in Ie
Maintaining the Final State At End of a Css3 Animation
Transparent Arrow/Triangle Indented Over an Image
Line Before and After Title Over Image
Why Does Minmax(0, 1Fr) Work For Long Elements While 1Fr Doesn'T