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

How to increment the duration of a css animation in ngFor loop with ngStyle attribute

I'd like to know if there is way to do this. I'm trying to increment the duration of a css animation. I couldn't find the right syntax to make it. Thanks !
guilhc
  • 1
-1
votes
3 answers

Convert number to degrees in ngStyle using Angular 8

{{result.percentage}} gives me a number from 0 to 100. If I get 25, I want it to convert to -45 degrees or if I get 0, I want it to convert to -90 degrees or if I get 75, then it gets converted to 45 degrees. [ngStyle]="{'transform': 'rotate(' +…
Elaine Byene
  • 3,868
  • 12
  • 50
  • 96
-1
votes
4 answers

How can I apply styles dynamically with ngStyle?

How can i switch left px value with right based on a boolean ? I want to switch [ngStyle]="{ 'left.px': offSetX } with [ngStyle]="{ 'right.px': offSetX } based on a condition import { Component, Input } from "@angular/core"; @Component({ …
dota2pro
  • 7,220
  • 7
  • 44
  • 79
-1
votes
1 answer

How to make Angular JS wait for $scope variable to be set before triggering ng-style

Summary of the Problem: I want to dynamically apply a CSS style to several div's using Angular JS' s ng-style directive. The trouble is that the expression bound to ng-style depends on a specific scope variable that I use to define the style I want…
ElsaInSpirit
  • 341
  • 6
  • 16
-1
votes
1 answer

NgStyle with dynamic content proper syntax angular 4/2

I am using NgStyle to dynamically set the background image of a container in angular 4. This site: Says the proper syntax is the following [ngStyle]="{'background-image': venueobject.groupphoto[0]}"> or [ngStyle]="{'background-image':…
amazing carrot soup
  • 265
  • 5
  • 14
-1
votes
2 answers

Angular - Change css using ng-style

I am trying to change top position of a DIV on Scroll event - In controller i have- angular.element($window).on("scroll", function(e) { vm.scrollTop = angular.element($window).scrollTop()+'px'; console.log(vm.scrollTop); });…
NewBee
  • 839
  • 7
  • 18
  • 42
-1
votes
1 answer

Show Text and Hide Image on hover column of table angular2

I am using table to display series of items for my data , every data has an action column and on action column there are images I want to hide image and show text when hover on image and vice-versa(show image and hide text) without hover. app.html …
Kumail Hussain
  • 869
  • 2
  • 26
  • 49
-1
votes
1 answer

AngularJS change font-style

I'm trying to change the font-style of an element when a variable is true. In my controller, there's a variable which returns its value. Now I want to change the font-style based on the return value. This should happen via ng-style. Already searched…
user6495062
  • 11
  • 1
  • 1
-1
votes
1 answer

(AngularJS) How to randomly order children in a div without an ng-repeat

I am making a basic trivia application and the JSON data I've received from my client doesn't allow for me to ng-repeat the choices on the trivia page. I have six static elements that display my choices based on filtered data from the previous…
Shane Morris
  • 1
  • 2
-2
votes
3 answers

How to use ng-style while geting style from json

Here is my code This is my code ng-style="background: {{x.background}}" What renders ng-style="background: #f4f4f4" I am expecting style="background: #f4f4f4"
user3845561
  • 68
  • 6
-3
votes
1 answer

Styling a MatHeaderCell dynamically with NgStyle?

I'm trying to provide dynamic styling to a MatHeaderCell instance like this: [ngStyle]="styleHeaderCell(c)" I've created a demo here. I can see that: styleHeaderCell(c) Receives the column and returns and object however the style is not applied,…
Ole
  • 41,793
  • 59
  • 191
  • 359
-3
votes
1 answer

Ngclass function with 2 objects

is it possible to add 2 objects to an ngclass function like
i get a Json error. SyntaxError: JSON.parse: bad control character in string literal at line 1…
Pearl
  • 39
  • 7
-4
votes
1 answer

how to write inline [ngStyle] for complex multiple conditions in angular2

Here, I want to pass a condition in div that when it contains a certain number display certain color. The condition is: if (num >= -100.0 && num <= -35.0) { return '#f1403b'; } else if (num > -35.0 && num <= 35.0) { …
Manzer Hashmi
  • 73
  • 2
  • 4
  • 12
1 2 3
…
17
18