You can achieve what you need with CSS variables. In your style sheet you can set the background image like this: .featured-image:after { content: ”; background-image: var(–featured-image); } After that you can programmatically set this variable on the same element or higher up in the DOM tree: <div class=”featured-image” [ngStyle]=”{‘–featured-image’: featuredImage}”> More about CSS variables … Read more
Don’t use {{}}s inside an Angular expression: <td ng-style=”set_color(payment)”>{{payment.number}}</td> Return an object, not a string, from your function: $scope.set_color = function (payment) { if (payment.number > 50) { return { color: “red” } } } Fiddle
It is possible to parse dynamic values in a couple of way. Interpolation with double-curly braces: ng-style=”{‘background-image’:’url({{myBackgroundUrl}})’}” String concatenation: ng-style=”{‘background-image’: ‘url(‘ + myBackgroundUrl + ‘)’}” ES6 template literals: ng-style=”{‘background-image’: `url(${myBackgroundUrl})`}”
The syntax of ng-style is not quite that. It accepts a dictionary of keys (attribute names) and values (the value they should take, an empty string unsets them) rather than only a string. I think what you want is this: <div ng-style=”{ ‘width’ : width, ‘background’ : bgColor }”></div> And then in your controller: $scope.width=”900px”; … Read more
For a single style attribute, you can use the following syntax: <div [style.background-color]=”style1 ? ‘red’ : (style2 ? ‘blue’ : null)”> I assumed that the background color should not be set if neither style1 nor style2 is true. Since the question title mentions ngStyle, here is the equivalent syntax with that directive: <div [ngStyle]=”{‘background-color’: style1 … Read more
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 … Read more