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

Angular 6: Update NG Style with function

I'm here today because I'm wondering something about the NG Style with Angular (my version being the 6). How can i update [ngStyle] when I use a function to return a value. As always, here is a simplified example of my problem: I generate div from…
Scieur Arnaud
  • 823
  • 2
  • 7
  • 13
2
votes
3 answers

Angular6 ngStyle to apply style dynamically

I am using angular6 and trying to implement background color through inline styling in angular table. If i hard code the values, the background color changes but if i try to put it through variable it remain same. Template:
Uahmed
  • 1,847
  • 5
  • 29
  • 45
2
votes
3 answers

angular 5 - bind full style expression

i wont to bind a full style expression for an html element. for example: expression like this in home.ts: divStyle:string = "top:50%;bottom:50%;color:green;"; and in home.html i was try these ways to bind the style to the element:
levi
  • 1,077
  • 2
  • 11
  • 24
2
votes
1 answer

Angular 6 style.property or ngStyle not updating when bound variable is being updated in component

I am trying to create a simple carousel and on click I am trying to update the style.transform on an element to update the translate3d so it will move. The variable that is bound in the component updates, but it does not update on the dom. The slide…
rthames62
  • 133
  • 1
  • 4
  • 12
2
votes
1 answer

How to set ngStyle to a default value in Angular

Here is a part of my html:
And here is the related CSS part: .container{ width:100%; height: 45px;} @media (min-width: 768px) { .container{ height:60px;} Now I want to bind the style of this div to a property by ngStyle.…
Eddie Lin
  • 300
  • 4
  • 14
2
votes
2 answers

AngularJS dynamic styling with extended class

I am trying to display a status label that will contain different background colors and text depending on the status in AngularJs (e.g. 'New' = green, 'Active' = yellow). I currently have a css file with .status { padding: 4px 8px; …
Carl
  • 841
  • 1
  • 13
  • 33
2
votes
1 answer

ngStyle with a function call not working in IE

in an angular 4 application i have styles like below [ngStyle]="{'border': getInterleaveColor(i)}" and the function getInterleaveColor(auditNumber) { var borderProperties = '2px solid'; if (auditNumber % 2 == 0) return…
Raas Masood
  • 1,475
  • 3
  • 23
  • 61
2
votes
2 answers

Angular 2 - change list item bg-color individually using ngFor

How can I change the background color of a list item generated using ngFor? I want to change the background color of each list item individually when I click on one or hover it? This is what I have now but it changes all of the line together when I…
MetaDude
  • 139
  • 5
  • 14
2
votes
1 answer

How to dynamically use object property as width in AngularJS (in ng-repeat)?

I cannot get the object's property to be read in ng-style(shape.radius || shape.length). I can't even get 1 to work at the moment, but would like to have an or statement included. Similar to my ng-class. There is a button to generate shapes, and…
Lindsey Olson
  • 21
  • 1
2
votes
0 answers

Angular ngStyle with function as expression (observable related)

In Angular 2 I'm using ngStyle to change the background and text color of a button. My ngStyle is using a function as it's expression. Here is the function: getButtonStyle() { …
Eric Bishard
  • 5,201
  • 7
  • 51
  • 75
2
votes
1 answer

same property multiple values in NgStyle

I'm using Angular 4 and trying to bind styles to my html elements based on variables through ngStyle. However, with browser incompatibilities I ended up with this issue. How can I bind 3 different styles to the same css property without checking…
guarinex
  • 110
  • 1
  • 10
2
votes
1 answer

Angular 2 ngStyle cannot bind font-family start with a number

I have tried to bind dynamic font-family to text. But I face a problem that a font name start with a number cannot be bind to DOM element. I've done a lot of research but I cannot find why it happens. Template:

Hello…

Nguyen Tran
  • 1,158
  • 1
  • 11
  • 18
2
votes
2 answers

Changing css dynamically without reloading page in Angular2

I have a side navigation bar, wherein there is progress bar in each nav. This is modular structure- MainFile -Children1 -children1.html -children1.component.ts -Children2 -children2.html -children2.component.ts …
Uzair Khan
  • 2,812
  • 7
  • 30
  • 48
2
votes
1 answer

How to update ng-style in ng-repeat

I have a ng-style inside of ng-repeat. The problem is the ng-style value is updated after a change but the actual style does not change.
Akamad007
  • 1,551
  • 3
  • 22
  • 38
2
votes
1 answer

PrimeNg Editor doesn't resize (angular 2)

I currently working on an Editor for an Angular 2 app and I'm having issues resizing it. In my code I alter the width property however it only reduces the body of the editor and not the toolbar, is there any way this can be altered as well? …
joeCarpenter
  • 1,495
  • 4
  • 19
  • 32
1 2 3
…
17 18