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

ngStyle unexpected behavior, not updating on property change

I'm a little confused why ngStyle is not working as expected. I'm following a tutorial by Brad Traversy on Udemy, and we're instructed to use ngStyle like so:

{{user.firstName}} {{user.lastName}}

Which would rely…
this
  • 191
  • 13
0
votes
1 answer

How to write inline ng-style for multiple conditions

I'm trying to write an inline ng-style for multiple conditions in this format;
but this code doesn't do anything, please is there any way I can check…
Ike Anya
  • 163
  • 1
  • 7
0
votes
1 answer

Why [ngStyle] is called many times during page rendering?

I have an Angular page using [ngStyle] = "getStyle()", when i run the page, seems the getStyle() has been called many times. Could anyone explain why this behavior is happening? Template:
Wayne Wei
  • 2,907
  • 2
  • 13
  • 19
0
votes
1 answer

Dynamically change ngStyle with click event in Angular

I am looking to change the color of an element when a different button is clicked, but I can't seem to find a solution that constantly checks for my boolean value. Here is my…
AylaWinters
  • 1,121
  • 2
  • 7
  • 24
0
votes
1 answer

Angular how may I apply condition on [ngStyle] and class. That if condition true [ngStyle] runs otherwise class runs

Component.Html

Here I have a class(infoSection) that is coming From my Component.css and [ngStyle]=FooterStyle which is coming from component.ts and I want to make a condition that
Abdul Rehman
  • 69
  • 9
0
votes
1 answer

Ngstyle selects items randomly

I have a problem with ngstyle in Angular. When I have a condition that ngstyle has to satisfy and it does, it either changes the background of the html element or not, and it's completely random. ex. for 122 it will load a GIF once and not once, and…
xd3s3
  • 3
  • 2
0
votes
0 answers

Set width of a div exponentially with [style.width.%]

I want to set the width of a div let say 7% of its container .container { display: flex; overflow-x: scroll; .cell { border: 1px solid black; background-color: red; flex: 0 0 auto; } }
Erjon
  • 923
  • 2
  • 7
  • 32
0
votes
3 answers

ngClass and ngStyle directive onclick element color needs to change in angular?

Hi every one I have created stackblitz https://stackblitz.com/edit/angular-fnvhnn-giypgb?file=app%2Fexpansion-overview-example.html for reference, I have used expansion panel to exapand the content, based on click the element the expansion happening…
Maniselvam R
  • 33
  • 1
  • 9
0
votes
2 answers

How to use ngFor index in ngStyle for specific item?

I have these lines of code
Ioannis Mikhailidis
  • 41
  • 1
  • 8
0
votes
1 answer

NgStyle doesn't apply with condition?

Can anyone tell my this works [style.height]="events?.length === 0 ? 'calc(100vh - 105px)' : null" but this doesn't? [ngStyle]="{'height: calc(100vh - 105px)': events?.length === 0 }" or this? [style.height]="{'calc(100vh - 105px)': events?.length…
chuckd
  • 13,460
  • 29
  • 152
  • 331
0
votes
2 answers

Angular: Unable to set the background cover using ng-style directive

I have been adding a background image using ngStyle...
However, this css is…
Steve Nginyo
  • 303
  • 3
  • 12
0
votes
1 answer

ngStyle directive not applied to a link tag

I'm attempting to style a link to a colour that is generated from an API. This works for text buttons etc, but when I try to apply this to a link it doesn't work.
Web Develop Wolf
  • 5,996
  • 12
  • 52
  • 101
0
votes
2 answers

How to use for statement and if statement in ngStyle

Patient ID. {{…
김기식
  • 5
  • 3
0
votes
1 answer

Angular: NgStyle Highlight Words in a Textbox using input::first-line?

How do I highlight the contents of a textbox in Angular? the following is not working. Currently using Material textbox. Need to apply it conditionally, based on boolean variable highlightTextFlag, maybe with ngstyle . Sample: input::first-line { …
user13889515
1 2 3
…
17 18