Angular 7 - Change background colour of component

Question

I am starting out in Angular so please excuse if this is a bit of a noob question. I have generated a component that I would like to use as the login screen. I am trying to change the background color of the entire page but can't do so successfully.

I have tried the following:

html{
    background-color: blue !important;
}

body{
    background-color: blue !important;
}

Which doesn't work. I do not want to change the background colour of all the pages, only this login component. So putting the above code into the styles.scss file isn't an option.

Solution

: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.

Comments

[Jacopo Sciampi]

wrap the login html inside a wrapper with position absolute, margin 0, top 0 and left 0, width 100% and height 100vh. Then you can change the wrapper background color as you want and all the page will be blue

[Tachyon]

Worked like a charm - thanks @JacopoSciampi

[Jacopo Sciampi]

You're welcome :) Have a nice day.