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
2 answers

ng-style function gets called on all items inside ng-repeat when array item is changed

Whenever I change a value in an array which is used for an ng-repeat, the Ng-style directive's function is getting fired for all the items in my array. See example and notice the console logs for the "getStyle(text)"…
alex.blender
  • 1
  • 1
0
votes
2 answers

Angular ngStyle not working on ui-grid

I want to auto resize a ui-grid using the ui ui.grid.autoResize module but the ngStyle never applies I have done this plunker to show what I mean
gblaise
  • 59
  • 9
0
votes
0 answers

Update ng-style based on JSON response

Trying to update the ng-style attribute for width based on the response that I get when the app first loads. Right now I am able to grab the data (count) that I need but I am trying to bind this count to a style of the progress as well. Right now I…
isaac weathers
  • 1,436
  • 4
  • 27
  • 52
0
votes
0 answers

Set the width of UL based on the number of li elements in it AngularJS

I want to update the width of my UL based on the number of LI elements inside that UL, currently I'm doing this by creating a custom directive with a $timeout which is actually delaying the page to be loaded with the content and also I achieved this…
Ajay Srikanth
  • 1,095
  • 4
  • 22
  • 43
0
votes
1 answer

Using Angular to style related CSS

I'm using Angular to let the user change the color of a bootstrap navbar. The actual background color change itself is simple enough, but I also want to change some related elements like the border-color and some of the shadows. What I have:
Tyler
  • 11,272
  • 9
  • 65
  • 105
0
votes
1 answer

Set the width of an element using another element

this code is simplified, but I need to set the width of the divs "wrap-description" to be the width of the imgs "picture-damage"+20 , of course it will be many elements "picture-damage" and "wrap-description" and their sizes will be different. I…
Sr_Evax
  • 9
  • 3
0
votes
2 answers

AngularJS - Assign DIV a Width Based on values in ng-repeat

I have a simple ng-repeat that throws out a bunch of data:
{{data.Name}} {{data.Age}}
Which will throw out something like: Pete 25 Adam 43 Lewis 19 How can i add a CSS property to my…
Oam Psy
  • 8,555
  • 32
  • 93
  • 157
0
votes
1 answer

AngularJS style issue IE

Im trying to figure out how to make this work on IE:
The code basically generates a dynamic table, and the left position of the object is taken…
Pablo Rincon
  • 999
  • 10
  • 23
0
votes
1 answer

using angular ng-style on an image tag to call out a background image

I'm trying to conditionally display an image with ng-style. I've tried all the suggestions listed here (and in the docs) but nothing seems to work. first try:
McMeep
  • 688
  • 2
  • 8
  • 13
-1
votes
1 answer

i want to control CSS of .cylinder::after dynamically in html, how to do this?

i am having sass file with below content .cylinder::after content: '' display: inline-block width: 75px height: 11.5px background: blue border: 1px solid #000000 border-radius: 50% position: absolute left: -1px bottom: -7.5px z-index: 0 so here…
Pritam Sarkar
  • 1
  • 1
-1
votes
1 answer

Applying ngStyle to all p tags within an html page

I am currently writing code for an Angular project that changes color dynamically based on the user selecting a theme. When a theme is selected it grabs from an api the hex code for the desired color to theme the app in, which for this I want to…
Justin Li
  • 1
-1
votes
1 answer

Angular - MatSlider propagating too much, also ngStyle not working (StackBlitz Available)

it's been a while since I didn't play with angular but I don't know what I'm doing wrong let's see what's the problem...
Arcall
  • 1
  • 1
-1
votes
2 answers

NGStyle Changes Not Always Reflected

I have an element that takes ng style but the styles aren't always being applied as expected when the style object changes. I'm specifically refering to the css animation below but I've seen similar behavior with background.
Austen Stone
  • 948
  • 1
  • 10
  • 21
-1
votes
2 answers

Changing the width according to the rating ng-style Angular

I am trying to change the width of this span according to the rating. The 'quality' in this case is from 1 to 5. If the rating is 5 the width should be 100%. How can i bind this with ng-style?
Andreea Popa
  • 49
  • 8
-1
votes
1 answer

How to set condition in ngstyle or ngclass

I have 2 different pages which is going to display the same data and both are sharing the same components. But both pages has different resolution one is the size with the alert box and one is similarly A4 size. how to set dynamic height and width…
user12106800
1 2 3
…
17
18