Is it possible to dynamically change the value of a CSS property of a class using Angular? I am trying to pass a color value dynamically to CSS after it is retrieved from database, and I am in search of a solution for this.

I have been trying to see if I could make ng-animate work for this, but it is not as straightforward.

Any help is appreciated.

Is it possible to dynamically change the value of a CSS property of a class using Angular? I am trying to pass a color value dynamically to CSS after it is retrieved from database, and I am in search of a solution for this.

I have been trying to see if I could make ng-animate work for this, but it is not as straightforward.

Any help is appreciated.

• javascript
• html
• angularjs
• css

• Why passing a value to CSS? Can't you just add another class based on an event or something? – typologist Commented Jun 14, 2016 at 2:55

6 Answers 6

Looks like following link has answer to you question. I would like to call it javascript way instead of angular way

How to dynamically create CSS class in JavaScript and apply?

There are multiple options, one of the ways is using ng-style. Let's say you have colors ing for each elements.

<ul>
  <li ng-repeat="item in items" ng-style="{'color': item.color}"></li>    
</ul>

If you want a single style color to be applied to all items of a class.

angular.element('.className').css('color','#DBCLOR');

If you know the class name which is already defined somewhere (in stylesheet, html) you can again create style and give new values to the class. The new values will be applied to all the elements which are having this class. Try to create a new style tag and create the property and value for it using javascript. Try to append this into head. If this does not work try to append this to body.

var style = document.createElement('style');
var newColor = '#efefef'; //fetched from AJAX or anywhere
style.type = 'text/css';
style.innerHTML = '.cssClass { color: '+ newColor +  '; }';
document.getElementsByTagName('head')[0].appendChild(style);

Use ng-style to acplish this

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  $scope.colors = ['red', 'blue', 'green'];
});

.item{
  padding:5px;
  width:100px;
  }

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp" ng-controller="mainCtrl">
  <div class="item" ng-repeat="color in colors" ng-style="{'background-color':color}">{{color}}</div>
</div>

if you dynamically change the value of a CSS property of a class, you would refer to ng-class

1. using ng-class

   <ANY ng-class="expression"> ... </ANY>

   you also can do as below, if expression is true, it will add class 'class-a'

only have a class:

<div ng-class="{ class-a: expression }"></div>

more than two classes:

<div ng-class="{ class-a: expressionA, class-b: expressionB, class-c: expressionC }"></div>

2. using $scope

   html:

   <div class="{{classPro}}></div>

   js:

   $scope.classPro = "className";

In your css file:

.classA {
  color: var(--your-color);
}

Your html (angular)

<p class="classA" [style.--your-color]="data.color"> YOUR CONTENT </p>