Stack Overflow
Stack Overflow

Questions tagged [ng-style]

The `ngStyle` directive allows you to set CSS style on an HTML element conditionally.

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

This directive executes at priority level 0.

Usage

as attribute

<ANY ng-style="{expression}">
   ...
</ANY>

as class

<ANY class="ng-style: {expression};">
   ...
</ANY>

Parameters:

Needs Expression which is 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.

References

https://docs.angularjs.org/api/ng/directive/ngStyle

268 questions
0
votes
3 answers

Why doesn't ng-style work initially with a css transition?

I'm trying to create a zoom effect, by adding a class and a width or height style to a span.
Squirrl
  • 4,909
  • 9
  • 47
  • 85
0
votes
1 answer

view does not change background image

I have a template in which I call a function and I have a directive element, .container-wrapper{"ng-controller" => "MovieRowCtrl"} %i.fa.fa-info-circle{"ng-click" => "updateSelectedMovie(movie)"} #big-box-container{"ng-if" => "rowActive"} …
alucardu
  • 129
  • 3
  • 13
0
votes
2 answers

What to use to set styling dynamically in Angular?

I started working with angular and creating my "little" project. I came up to templating issue. Basically, I try to set colour for elements dynamically with angular. I can't figure out what would be the best and the "right" way to do it. Is it ok…
saulenzo7
  • 51
  • 12
0
votes
1 answer

How to bind DOM property in directive

Given this example: var SomeApp = angular.module('SomeApp', []) .controller('SomeController', function($scope){ $scope.items = [0,1,2,3] }) .directive('gridResize', function(){ return { scope: true, link:…
tao
  • 82,996
  • 16
  • 114
  • 150
0
votes
1 answer

Instantiate an object so it can be shared with multiple directives

What I am doing: I am creating two attribute directives: One moves an element to the left, and another centers an element on the page. See code below. Notice that I'm manipulating ng-style to set those css properties (moving the element to the left,…
dragonfire
  • 407
  • 7
  • 16
0
votes
1 answer

How to transform style="{{data.something}}" to show up in IE?

I currently have this:
but the style is not showing up in IE. How can I solve these? green.image contains the following: image = "background:…
arturojain
  • 167
  • 1
  • 4
  • 15
0
votes
1 answer

ngStyle more properties

I want to have more properties in ng-style but it won't work. This is my code line:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

If I only have the {color: titleColor} then…
RiesvGeffen
  • 1,539
  • 2
  • 11
  • 29
0
votes
1 answer

Angular ng-style is adding a style attribute that is then not kept in sync

My angular website gets data from a Web API back end, and initially a generic background is shown. But after login, the customer background image url is retrieved and used in my ng-style attribute. When the page initially loads, a style attribute…
toddmo
  • 20,682
  • 14
  • 97
  • 107
0
votes
2 answers

Angular JS: inline style with bound value works on mac not windows

I built a table with ng-repeat showing type specs for a project with a column of "swatches": As you can see, works great on Mac Safari and Chrome. However, on IE 11/Win 8: The rows of the table are such:
Steve
  • 14,401
  • 35
  • 125
  • 230
0
votes
1 answer

Create dynamic class with Angular

I'm trying to add a dynamic class in Angular template and set a style attributes accordingly. HTML would be -- CSS would be -- product-id : { color: #ccc; } Where product-id would be a dynamic value. What would…
Yasir
  • 879
  • 5
  • 13
  • 31
0
votes
3 answers

Apply CSS based on calculation using Angular

I've got a reading that comes in every few seconds. Currently I'm using thresholds to determine when the animation should take place:
tryingtolearn
  • 2,528
  • 7
  • 26
  • 45
0
votes
1 answer

Having a delay for ng-style

I'm using ng-style to set the width of an element, like so:
The function that I'm using in my controller: $scope.calculateWidth = function(input,type){ var width = input /…
Squrler
  • 3,444
  • 8
  • 41
  • 62
0
votes
0 answers

ng-style background image not working

I am trying to change the background image using ng-style
When it renders its looking for local path like…
balaji g
  • 153
  • 2
  • 10
0
votes
0 answers

AngularJS - getting height of an element makes my app crash

I have created a directive for Google Map and I want it to cover 100% of parent container's width (works) and also 100% of parent container's height (did not work with css height:100%;). But the css is not my problem anymore. So I have created a…
Stevik
  • 1,092
  • 2
  • 16
  • 37
0
votes
1 answer

How to dynamically update ng-style based on a variable?

I want to pass on the value of x, y from the array (item.x, item.y) to the ng-style of the parent element by updating the variables transformX, transformY (the updating is achieved by ng-click directive). -html-
Jan Kielczewski
  • 1
  • 2
1 2 3
…
17 18