I am working on a admin panel developed with angular 4 and trying to integrate a sections to customize styling like change color, bg etc.
I already have developed a sections to save settings in database got them on app load as json using API.
Now I am trying to generate a dynamic css using values from json, I tried with following code in main component but its not working
@Component({
templateUrl: 'card.html',
styles: [`
.card {
height: 70px;
width: 100px;
color: {{css.cardColor}};
}
`],
})
After going through different methods and approached to add dynamic css to all pages on angular app I ended up with following solutions.
Requirement : generate dynamic css based on values returned from and API to change design and styling.
Solution :