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
127
votes
5 answers

Angular - How to apply [ngStyle] conditions

I have a div that I want to style based on a condition. If styleOne is true I want a background colour of red. If StyleTwo is true, I want the background colour to be blue. I've got half of it working with the below code.
MegaTron
  • 3,133
  • 6
  • 28
  • 45
113
votes
6 answers

Apply CSS style attribute dynamically in Angular JS

This should be a simple problem, but I can't seem to find a solution. I have the following markup:
I need the background color to be…
jonhobbs
  • 26,684
  • 35
  • 115
  • 170
80
votes
2 answers

How to set div width using ng-style

I am trying to set the div width dynamically using ng-style but it is not applying the style. Here is the code:
…
user3049403
  • 801
  • 1
  • 6
  • 3
76
votes
8 answers

angularjs ng-style: background-image isn't working

I'm trying to apply a background image to a div by using the angular ng-style ( I tried a custom directive before with the same behaviour ), but it doesn't seem to be working.
37
votes
3 answers

Using AngularJs "ng-style" within "ng-repeat" iteration

I am tring to conditionally set the colors of data elements in a table based on their value using ng-style. Each row of data is being generated using ng repeat. So i have something like:
Sean Geoffrey Pietz
  • 1,120
  • 2
  • 12
  • 17
31
votes
4 answers

Change style of pseudo elements in angular2

Is it possible to change style of pseudo elements using [style] or [ngStyle] in angular2? in order to get a blur effect on a div acts like an overlay, and I should set up background-image on pseudo element. I tried something like
Murhaf Sousli
  • 12,622
  • 20
  • 119
  • 185
30
votes
2 answers

Multiple attributes in ng-style

I need to have multiple raw style attributes like : $scope.css = "'width': 'calc(100% - "+$scope.fixedColumnsWidth+"'),'margin-left':'"+ $scope.fixedColumnsWidth+"'";
This is not working. It works when I use
TrtG
  • 2,778
  • 6
  • 26
  • 39
25
votes
4 answers

Angular2 Exception: Can't bind to 'ngStyle' since it isn't a known native property

I have done a lot of work with the new Angular2 Framework recently. While testing out some of the features, I ended up with the error: Can't bind to 'ngStyle' since it isn't a known native property While investigating the error itself I came to…
Marcel Jöstingmeier
  • 527
  • 1
  • 5
  • 10
23
votes
5 answers

Angular 2: set hover properties using ngStyle

I am trying to set the hover property states using [ngStyle]. The following only sets the normal state colors. When I mouse over the button, the button does not change to the pressed colors as expected.
14
votes
1 answer

How to get multi css rule for ng-style by function?

I need for apply multi css rule to html tag in angular form template.
{{data.objectStyle.title}}
getStyle function in…
sajjad
  • 646
  • 1
  • 9
  • 20
11
votes
3 answers

Angular TypeError: name.replace is not a function for ng-style

I'm new to angular and keep getting the following error in the console TypeError: name.replace is not a function. I'm not sure what's exactly causing it, but it seems to be caused by the ng-style statement and maybe something to do with the…
Steven10172
  • 2,003
  • 4
  • 21
  • 37
8
votes
5 answers

How to use variable in [ngStyle] in angular?

I want to change position depends on some events. For example at the begining space from top should be 100px, but after button click should be 0px
user11768519
8
votes
4 answers

How to change a CSS property dynamically in AngularJS

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
CSS .offer-detail-image-div { …
rashadb
  • 2,515
  • 4
  • 32
  • 57
8
votes
4 answers

AngularJS: $rootScope:infdig error when calling a ng-style function inside ng-repeat

I'm trying to build an animation on some phrases that will be displayed on the site main page, in a random position and with fade and translate effects. I would achieve this using ng-style attribute inside an ng-repeat attribute and setting the…
Androidian
  • 1,035
  • 1
  • 16
  • 40
8
votes
5 answers

How to use ng-style with !important?

Tag Button already has cursor css assigned. I want to override cursor css according to is_active values to disable button. is_active may have values 0 or 1. Following is code for js/html please let me know correct method to apply cursor css to…
Nishant
  • 358
  • 2
  • 5
  • 11
1
2 3
…
17 18