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
1 answer

ng-style not refreshing dynamically

I have an md-card with this code: ... pageWidth is a $scope variable bound to $(window).width(). Here is the code for that: $scope.pageWidth =…
Romulus3799
  • 1,827
  • 3
  • 15
  • 20
0
votes
3 answers

AngularJS - conditional ngStyle

Is there a possibility to do something like this: This if - else does not work. ngClass does not work because the color is a…
quma
  • 5,233
  • 26
  • 80
  • 146
0
votes
1 answer

change CSS based on value Angularjs

I want to change label color and cursor type based on ng-model index.html
Kumail Hussain
  • 869
  • 2
  • 26
  • 49
0
votes
1 answer

Infinite $digest Loop when within an ng-repeat there's an ng-style that calls a function that uses Math

I am trying to dynamically set the background colors of my labels. How I implemented that is to use ng-style like so: function getColor() { return ('#' + Math.floor(Math.random() * 16777215).toString(16)); }
fab
  • 452
  • 6
  • 20
0
votes
1 answer

AngularJS - Use ng-style to set color of radio button label when checked

I know how to set the color of a radio button label with ng-style, like this: ng-style="{'background-color': buttonColor}" But how can I change the color of the radio button label when it is checked using the ng-style directive? In css it is like…
georgej
  • 3,041
  • 6
  • 24
  • 46
0
votes
1 answer

How to limit ngStyle to single element not all

I have dynamically created a table using nested ngFor loops. When I mouseover one of the spans the background colour changes for all of the spans. The behaviour I want and expect is that the background will change only on the span that I am on and…
Shane G
  • 3,129
  • 10
  • 43
  • 85
0
votes
1 answer

ng-style assign dynamic scope variable from $index

I'm trying to assign a scope variable's value to an ng-style directive but the name is not parsing. What am I doing wrong? When you press the TEST button it should turn the text to RED but the scope variable is not parsing as it's name is dynamic.…
A_V
  • 362
  • 1
  • 3
  • 19
0
votes
1 answer

Binding variable binds as null when bind using ngStyle

I am trying to set the background image using ngStyle,
it works when the category is one word, but it does not…
user7426734
0
votes
1 answer

Angular.js - Changing an Element's CSS by clicking another Element

I'm very new to Angular.js. I'm grabbing images from a MySQL database and printing them to the screen like this: while ($row = mysqli_fetch_array($result)){ echo "
"; On the echoed div, I have an…
rpivovar
  • 3,150
  • 13
  • 41
  • 79
0
votes
2 answers

NG-STYLE with custom condition not firing

I have the following item in a remote datasource (greatly simplified) [ { "id": "3", "card_name": "Free Beer!", "count": "1" } ] I have a DIV with an NG-REPEAT (again greatly simplified)
…
MOLEDesign
  • 488
  • 8
  • 20
0
votes
1 answer

ui-grid ng-style dynamic height

I got a simple grid used like this :
sebius
  • 102
  • 2
  • 14
0
votes
1 answer

Angular 2 - conditional styling for descendants

.parent { color: blue; } .parent * { color: red; } .child { color: black; } .grandchild { color: green; }
Parent
Child
GrandChild
Say I have a property…
jj123456
  • 519
  • 1
  • 5
  • 11
0
votes
2 answers

How can I apply ng-style dynamically if ng-class is true?

.test{color:red;background:blue;} .test.selected { position:relative; left: 100px; padding:10px; background:green; }
jake
  • 136
  • 1
  • 12
0
votes
1 answer

Interpolation within ngStyle

I need to use a media query with ngStyle when building a column component for use within a grid. This is what I have so far: import { Component, Input } from '@angular/core' const smMin = '48em' const mdMin = '64em' const lgMin = '75em' const…
vamsiampolu
  • 6,328
  • 19
  • 82
  • 183
0
votes
1 answer

Why Nested curly braces in angular doesn't work?? What is alternative solution for it?

I have a json object "blog1":{ "blogid":"1", "body":"sometext" "IMG":"URL of image" } I am trying to access this objects IMG element to set as background IMG for div using ng-style as below
…
user7459550
  • 1
  • 1
1 2 3
…
17 18