Generate dynamic css based on variables angular
you can use ngStyle to dyanaically add the css to your page from json.
<div [ngStyle]="{'color': variable ? 'red' : 'blue'}"></div>
An another example of same can be
<div md-card-avatar [ngStyle]="{'background-image': 'url(' + post.avatar + ')', 'background-size': 'cover' }"></div>
here i have loaded background image from the json
Direct approach available in angular is using ngstyle as follows
<div [ngStyle]="{'color': style.colorVal ? style.colorVal : '#000', 'font-size' : style.fontSize ? style.fontSize : '16px' }"></div>
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.
Code sample
import { CssService} from './Css.service';@Component({ selector: 'DynamicCss', templateUrl: './DynamicCss.component.html', styleUrls: ['./DynamicCss.component.scss']})export class ServiceProviderComponent implements OnInit { cssVariables: any; constructor(private cssService:CssService){ /* call the service/api to get the css variable values in cssVariables */ }}
Now apply css using jquery or javascript to append css with help of function like following
appendCss(customData){ let text = '.custom-form-1 { background-image: url("`+customData.background_image+`"); }'; $(document).ready(function(){ $("style").append(text); });}
and call this function after loading custom data from service or other variable like I did it ngOnInit
ngOnInit(){ this.appendCss(this.customizeFormData);}
Its using jquery but can be done with javascript/typescript as well if you dont want to use jquery in your angular app
Other useful resource https://github.com/angular/angular/issues/9343#issuecomment-312035896
You can bind only style.color
:
<div class="card" [style.color]="cardColor">lorem ipsum</div>