Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Generate dynamic css based on variables angular

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.

like image 511
Vikram Avatar asked Sep 05 '17 05:09

Vikram


People also ask

How do you dynamically change CSS?

If you want to change the CSS styles dynamically you'll have to attach this portion of code to some event. For example, if you want to change the styles of your element when clicking on a button, then you have to first listen to the click event and attach a function containing the previous code.

Can you change SCSS variable value dynamically?

CSS Variables to the Rescue CSS variables is a standard which enables you to have variables in CSS. SCSS is compiled to CSS during compile time, and SCSS variables are replaced with resolved value during compile time, which means there is no way to change the variable during run time.

Can we make CSS dynamic?

It is worth noting that while pre/postprocessor variables are only used at compilation-time, CSS variables can be used and updated dynamically. What does this mean? It means that they are preserved in the actual CSS stylesheet. So the notion that they are variables will remain even after the stylesheets are compiled.


1 Answers

You can use ngStyle to dynamically add the css to your page from json.

<div [ngStyle]="{'color': variable ? 'red' : 'blue'}"></div> 

An another example:

 <div md-card-avatar [ngStyle]="{'background-image': 'url(' + post.avatar + ')', 'background-size': 'cover'  }"></div> 

here I have loaded background image from json-data.

like image 90
Ajinkya Dhote Avatar answered Sep 28 '22 03:09

Ajinkya Dhote