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

How to apply multiple styles based on multiple conditions in ng-style directive?

In angular, I need to apply different style attributes based on different conditions but its not working this way and I only can apply 2 conditions with conditional expression.
DragonKnight
  • 1,740
  • 2
  • 22
  • 35
3
votes
3 answers

Why do we use ng-style instead of style in AngularJS for css formatting?

I started working with AngularJS for the past few days. I just want to know why do we use ng-style when we have style tag for styling our components in static and dynamic webpages. I hope i get a solution for what we use ng-style in particular for…
santosh
  • 23
  • 1
  • 5
3
votes
0 answers

Angular2 ngStyle not updating when NgModel changes

I have the following HTML structure:
change style of this div
And js/ts: styleObj = { backgroundColor: "black" } At first, it seems to work as expected.…
atcastroviejo
  • 253
  • 1
  • 3
  • 10
3
votes
3 answers

Angular2 two functions in NgStyle

I want to set two functions in ngStyle. I've tried [ngStyle]="setAlignmentStyle(element.alignment);setShapeStyle(element.shape);" but it gives template parse errors. How should I set two functions in ngStyle? page.component.ts export class…
Ugnius Malūkas
  • 2,649
  • 7
  • 29
  • 42
3
votes
2 answers

How do properly use css's "calc()' with ng-style

I have the following inline-styling using Angular's ng-style and css's "calc()', but it didn't work. Can anyone tell me what's wrong? // my jade file has a class named '.logo-area'. .logo-area(ng-style="{'right':'calc(100% -'+({{fixedWidth}}+'px')…
zihaow
  • 312
  • 2
  • 9
  • 23
3
votes
3 answers

How to update element style on click with ng-style

I need to update the size of a div when I click on a specific button. This is the code for resizing the div $scope.ResizeBand = function(dashboard) { StateToUpdate(dashboard); dashboard.Height =…
PJDW
  • 145
  • 1
  • 4
  • 15
3
votes
1 answer

AngularJS multiple backgrounds in ngStyle

I am trying to apply a gradient to an element using angular but failing to do so with ngStyle. Here is an example of what I try to achieve: http://run.plnkr.co/plunks/mwJBcWaJ1hqOUCsSyy8a/ Old link, not working anymore…
Tobias Kopelke
  • 33
  • 4
3
votes
4 answers

ng-style not updating fast enough

I have this progress bar
After…
snaplemouton
  • 1,459
  • 14
  • 28
2
votes
1 answer

Angular - How to pass object dynamically to div element using [ngstyle]

I'm trying to make grid-row and grid-column to be dynamically populated from API. component.html
{{element['Tool…
Roddam harsha vardhan reddy
  • 23
  • 4
2
votes
1 answer

ngStyle background image not visible

I've got the following problem: I want to insert a background image to my website with ngStyle. The following code works fine:
Felixbrandi
  • 71
  • 6
2
votes
2 answers

How to apply transform scale inline style in Angular?

How Can I apply transform inline style by passing values from angular Here is the Stackblitz Link import { Component, Input } from "@angular/core"; @Component({ selector: "hello", template: `

Hello {{ name }}!

…
dota2pro
  • 7,220
  • 7
  • 44
  • 79
2
votes
1 answer

Is it possible to combine ng-class with ng-style

Our team is working in ServiceNow and have a general question about using ng-class in combination with ng-style. We've created a widget that are task tiles and want to color the borders based on their status (i.e. green for finished, red for…
Dave
  • 1,257
  • 2
  • 27
  • 58
2
votes
1 answer

Displaying Bootstrap Class In Angular NgFor NgStyle

I have a header nav menu that I'm trying to display using a typescript object array using bootstrap. The issue I am having is that instead of displaying it horizontal as it does when hardcoded, the array causes it to display vertical. I'm sure it…
JBellmon
  • 23
  • 2
2
votes
1 answer

background-image isn't working in Angular6 using ngStyle

I want to set background-image dynamically using ngStyle. But it isn't loading anything. Here is my HTML And…
Abdullah Jubaer
  • 83
  • 1
  • 6
2
votes
2 answers

NgStyle in Angular 7 CSS grid layout not working properly?

I am having a problem with ngStyle after updating to angular 7. In angular 5 its working fine. Using ngStyle I am dynamically applying style with Css grid. but dont know why 'grid-column': '1 / span 2' is not working. here is my code
naresh mesineni
  • 67
  • 1
  • 8
1 2
3
…
17 18