Angular 6 set Background Color in Html to CSS Variable

Question

I am using Angular 6 and I have a simple div and want to set the background color of this div from inside the template. This works fine when passin

Answer 1

You can do it in 2 ways

1. use pipe that get a string and return some color code code.

2. add to the html tag a dynamic class for example:

and in the scss add the options

scss:

.my-div{
    &.optoin1{
       background-color:red;
     }
&.optoin2{
       background-color:black;
     }
&.optoin3{
       background-color:green;
     }
&.optoin4{
       background-color:yellow;
     }
}