How to change a CSS property dynamically in AngularJS

Question

Right now I have a background image URL hard-coded into CSS. I'd like to dynamically choose a background image using logic in AngularJS. Here is what I currently have:

HTML

<div class="offer-detail-image-div"><div>

CSS

.offer-detail-image-div {
  position: relative;
  display: block;
  overflow: hidden;
  max-width: 800px;
  min-height: 450px;
  min-width: 700px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 25px;
  padding-left: 25px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border-radius: 5px;
  background-image: url('/assets/images/118k2d049mjbql83.jpg');
  background-position: 0px 0px;
  background-size: cover;
  background-repeat: no-repeat;
}

As you can see, the background image in the CSS references a specific file location. I want to be able to programmatically determine the location of the image URL. I really don't know where to begin. I do not know JQuery. Thank you.

Have you checked docs.angularjs.org/api/ng/directive/ngStyle ? — Makarov Sergey
– Makarov Sergey, Commented Sep 12, 2016 at 9:01
@ Makarov Sergey I have looked at ngStyle but it's not clear to me whether that is the class or modifies a portion of the class and if so how those dots are connected. Also I'm not sure if ngStyle or ngClass is actually better or how they are different. Perhaps an example in an answer? :) — rashadb
– rashadb, Commented Sep 12, 2016 at 9:04

Sayed Mohd Ali · Accepted Answer · 2018-11-22 09:38:04Z

17

You can use ng-style to dynamically change a CSS class property using AngularJS.

Hope this ng-style example will help you to understand the concept at least.

More information for ngStyle

var myApp = angular.module('myApp', []);
myApp.controller("myAppCtrl", ["$scope", function($scope) {
      $scope.colors = ['#C1D786', '#BF3978', '#15A0C6', '#9A2BC3'];
      $scope.style = function(value) {
          return { "background-color": value };
      }
}]);

ul{
  list-style-type: none;
  color: #fff;
}
li{
  padding: 10px;
  text-align: center;
}
.original{
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myAppCtrl">
  <div class="container">
    <div class="row">
      <div class="span12">
        <ul>
          <li ng-repeat="color in colors">
            <h4 class="original" ng-style="style(color)"> {{ color }}</h4>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
</body>

Edit-1

You can change the background-image: URL by following way.

$scope.style = function(value) {
   return { 'background-image': 'url(' + value+')' };
}

edited Nov 22, 2018 at 9:38

Sayed Mohd Ali

2,2523 gold badges14 silver badges31 bronze badges

answered Sep 12, 2016 at 9:07

Mohit Tanwani

6,6382 gold badges16 silver badges33 bronze badges

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

7 Comments

rashadb Over a year ago

@ Loading.. great example. I'm going to try it out right now but I think I understand it. Please give me a few minutes with which to fiddle around with it.

Mohit Tanwani Over a year ago

@rashadb sure you can try it, You just need to change background-image instead of color.

rashadb Over a year ago

I'm not getting how to implement the url portion in JS correctly and therefore I'm getting the following error: ReferenceError: url is not defined

Mohit Tanwani Over a year ago

Can you create jsfiddle ?

Mohit Tanwani Over a year ago

In function you can do it like this. return { 'background-image': 'url(' + value+')' };

|

Itsik Mauyhas · Accepted Answer · 2016-09-12 09:02:06Z

1

You can use ng-class : documation. If you want to do it in your directive check directive - attr : attr.

answered Sep 12, 2016 at 9:02

Itsik Mauyhas

4,01415 gold badges75 silver badges119 bronze badges

3 Comments

rashadb Over a year ago

@ Itsik Mauyhas, this looks useful but in my case I don't want to programmatically call classes; I just want to programmatically modify the single item within the class, background-image. It's not clear to me how to do this with ng-class.

Itsik Mauyhas Over a year ago

In this case look at the directive documation, adding and removing attr dynamically.

rashadb Over a year ago

I did take a close look at the difference between the two and ngclass is dynamically serving fixed classes where is ng-style is for setting elements of style dynamially. I believe ng-style is the correct one for my case. Thanks.

sofend · Accepted Answer · 2017-12-15 21:45:39Z

0

You can use [ngStyle] directly. It's a map, so you can directly address one of its elements like so: [ngStyle.CSS_PROPERTY_NAME]

For example:

<div class="offer-detail-image-div"
     [ngStyle.background-image]="'url(' + backgroundSrc + ')'">Hello World!</div>

Also, for serving assets, Angular has the bypassSecurityTrustStyle utility function that can come in handy when serving up assets dynamically.

answered Dec 15, 2017 at 21:45

sofend

6671 gold badge8 silver badges17 bronze badges

Comments

SAI TEJA BATHULA · Accepted Answer · 2017-08-18 14:48:18Z

-1

enter the size in textbox you can see box changes height and width

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<p>Change the value of the input field:</p>

<div ng-app="" >

<input  ng-model="myCol" type="textbox">

<div style="background-color:red; width:{{myCol}}px; height:{{myCol}}px;"> </div>


</div>


</body>
</html>

edited Aug 18, 2017 at 14:48

answered Aug 18, 2017 at 14:41

SAI TEJA BATHULA

13 bronze badges

Collectives™ on Stack Overflow

How to change a CSS property dynamically in AngularJS

4 Answers 4

7 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related