Apply CSS style attribute dynamically in Angular JS

Question

This should be a simple problem, but I can't seem to find a solution.

I have the following markup:

<div style="width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;"></div>

I need the background color to be bound to the scope, so I tried this:

<div style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:{{data.backgroundCol}};}"></div>

That didn't work, so I did some research and found ng-style, but that didn't work, so I tried taking the dynamic part out and just hard-coding the style in ng-style, like this...

<div ng-style="{width:20px; height:20px; margin-top:10px; border:solid 1px black; background-color:#ff0000;}"></div>

and that doesn't even work. Am I misunderstanding how ng-style works? Is there a way of putting {{data.backgroundCol}} into a plain style attribute and getting it to insert the value?

Gobbler

Checkout this article: ecofic.com/about/blog/… – Koan

Answer 1

ngStyle directive allows you to set CSS style on an HTML element dynamically.

Expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys. Since some CSS style names are not valid keys for an object, they must be quoted.

ng-style="{color: myColor}"

Your code will be:

<div ng-style="{'width':'20px', 'height':'20px', 'margin-top':'10px', 'border':'solid 1px black', 'background-color':'#ff0000'}"></div>

If you want to use scope variables:

<div ng-style="{'background-color': data.backgroundCol}"></div>

Here an example on fiddle that use ngStyle, and below the code with the running snippet:

angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
  $scope.items = [{
      name: 'Misko',
      title: 'Angular creator'
    }, {
      name: 'Igor',
      title: 'Meetup master'
    }, {
      name: 'Vojta',
      title: 'All-around superhero'
    }

  ];
});

.pending-delete {
  background-color: pink
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller='MyCtrl' ng-style="{color: myColor}">

  <input type="text" ng-model="myColor" placeholder="enter a color name">

  <div ng-repeat="item in items" ng-class="{'pending-delete': item.checked}">
    name: {{item.name}}, {{item.title}}
    <input type="checkbox" ng-model="item.checked" />
    <span ng-show="item.checked"/><span>(will be deleted)</span>
  </div>
  <p>
    <div ng-hide="myColor== 'red'">I will hide if the color is set to 'red'.</div>
</div>

Pearce

I want to get the current clicked element's original background-color and not the background-color when I hover. Using following gives me hover background color, not the original color: $event.currentTarget.currentStyle.backgroundColor; any idea how to get original background color? – Latinity

<div ng-style="{'background-color': data.backgroundCol}"></div> should be <div ng-style="{background-color: data.backgroundCol}"></div> – Rivarivage

Answer 2

The easiest way is to call a function for the style, and have the function return the correct style.

<div style="{{functionThatReturnsStyle()}}"></div>

And in your controller:

$scope.functionThatReturnsStyle = function() {
  var style1 = "width: 300px";
  var style2 = "width: 200px";
  if(condition1)
     return style1;
  if(condition2)
     return style2;
}

Acetanilide

I would not recommend that, angular is all about keeping style details in the view – Glennieglennis

I don't recommend this too, this will work only in few browsers like chrome, but if you look at IE 9+ this won't work – Rickets

In fact this still doesnt work in IE11, I copied some code from a previous project and was confused when it didnt work, previous project was using Chrome – Sarre

Answer 3

Directly from ngStyle docs:

Expression which evals to an object whose keys are CSS style names and values are corresponding values for those CSS keys.

<div ng-style="{'width': '20px', 'height': '20px', ...}"></div>

So you could do this:

<div ng-style="{'background-color': data.backgroundCol}"></div>

Hope this helps!

Gq

Yeah, I saw that in the docs, but I couldn't see how to translate that to multiple rules, now I can see that it's not normal css syntax but object syntax. – Gobbler

Answer 4

On a generic note, you can use a combination of ng-if and ng-style incorporate conditional changes with change in background image.

<span ng-if="selectedItem==item.id"
      ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_active.png)',
                'background-size':'52px 57px',
                'padding-top':'70px',
                'background-repeat':'no-repeat',
                'background-position': 'center'}">
 </span>
 <span ng-if="selectedItem!=item.id"
       ng-style="{'background-image':'url(../images/'+'{{item.id}}'+'_deactivated.png)',
                'background-size':'52px 57px',
                'padding-top':'70px',
                'background-repeat':'no-repeat',
                'background-position': 'center'}">
 </span>

Bonne

Answer 5

I would say that you should put styles that won't change into a regular style attribute, and conditional/scope styles into an ng-style attribute. Also, string keys are not necessary. For hyphen-delimited CSS keys, use camelcase.

<div ng-style="{backgroundColor: data.backgroundCol}" style="width:20px; height:20px; margin-top:10px; border:solid 1px black;"></div>

Oilcloth

Answer 6

Simply do this:

<div ng-style="{'background-color': '{{myColorVariable}}', height: '2rem'}"></div>

Supporter