how to change background color from one single component in angular-CodePudding

I'm building a website where it will have colors alternating between white and black but I can't put background color on the components separately, only on the global CSS. how to solve this?

CodePudding user response：

This should be possible in various ways. One is to target the host element in each component's styling file:

:host {
  background-color: black;
}

To make this dynamic, you could do something clever with a binding or through a global stylesheet, like you've mentioned.

CodePudding user response：

There are different ways you can do this but I think this is the most simple one.

You can just make two divs

HTML:

<div class="black">
</div>

And

<div class="white">
</div>

Then you edit both classes in CSS

You can just do something like this:

.black {
   background-color: black;
}

.white {
   background-color: white;
}