How to change color of elements with angular.js

Question

How can I change color of elements using css classes with angular js. I read some stuff online but somehow I am missing something as it does not work for me.

My js fiddle:

http://jsfiddle.net/ynko3ct3/1/

Code:

<p class="change-background-color">No difference!</p>
 <form>
 <div class="form-group">
      <label>Header color</label>
      <input class="form-control" type="text"  ng-model="Headercolor" placeholder="#f00">
    </div>
    </form>

css

.change-background-color { background-color: {{Headercolor}}; }

shershen · Accepted Answer · 2016-02-02 14:17:31Z

4

Please check the updated fddle: http://jsfiddle.net/ynko3ct3/2/

You should use ng-style directive to change style attribute in HTML, not in CSS like this:

<p class="change-background-color" ng-style="{'background-color':Headercolor}">
  No difference!
</p>

answered Feb 2, 2016 at 14:17

shershen

10k11 gold badges44 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Imo Over a year ago

Is there a way where I don’t have to change a lot in HTML. The problem is that there are many elements like links and I don’t want to go and add ng-style everywhere

shershen Over a year ago

Angular v1.x can affect your HTML, templates - only if you change them accordingly. but never your CSS

Shaishab Roy · Accepted Answer · 2016-02-02 15:15:14Z

1

you can check also this link : PLUNKER DEMO

need to use ng-style="yourVariableName" in your <p></p> tag and call a function on change of input field to set input field color for <p></p> tag.

In html:

<p ng-style="backColor">this is a simple background color seter</p>
<input ng-model="headerColor" ng-change="setColor()">

and in your controller:

$scope.headerColor = '#cd0a0a';
  $scope.backColor = {'background-color':$scope.headerColor};
  $scope.setColor = function() {
    $scope.backColor = {'background-color':$scope.headerColor};
  };

answered Feb 2, 2016 at 15:15

Shaishab Roy

16.9k7 gold badges56 silver badges69 bronze badges

2 Comments

Imo Over a year ago

Can I use the same from a directive?

Shaishab Roy Over a year ago

yep, you can from a directive

Collectives™ on Stack Overflow

How to change color of elements with angular.js

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related