Generate dynamic css based on variables angular 4

Question

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}};

        }

      `],

})

I am not sure how I should load the css values in component and use them in style tag. I didnt find any other solution for same.

Another way is to use angular animation concept but the css is going to be huge and its not possible to implements it whole with angular animation using triggers and all. I believe there is a solution for this as it seems a genuine requirements and should have done by lots of other developers.

Any help is appreciable.

Edit : can not use ngStyle as its going to be applied on almost all elements as its for whole application and not only for specific element.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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 :

create a new component and create a service to load dynamic css variables from API.
Add style tag in template file and use variable values for properties.
Load this template on all pages or on main template.
On app build style will be moved to head tag.

Generate dynamic css based on variables angular 4

Sign up