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

Angular/CSS Style parts of a component dynamically

I have a component, that has different parts. However, I want to be able to style the individual components with different colors. For instance:
Steven Scott
  • 10,234
  • 9
  • 69
  • 117
0
votes
1 answer

NgStyle implementation in angular 6/7/8

We have a implementation of NgStyle in our project , in versions 5 we had implementation as below , let divRef = new ElementRef(this._renderer.createElement("div")); let divStyle = new NgStyle(this._differs, divRef, this._renderer); …
Harshavardhan N
  • 143
  • 1
  • 1
  • 9
0
votes
1 answer

Formatting ng-style correctly for background-image shorthand

There's something not right with the below line. I have my height and width correctly showing up in my app. If I include + character.offsetX + 'px' + character.offsetY + 'px' the background-image styling does not appear. Character.offsetX and…
user2619824
  • 478
  • 1
  • 5
  • 20
0
votes
0 answers

Angular 7 Performance Impact with Dynamic Styles

I am creating a component which utilises a large number of dynamic styles (eg 10) [styles.xx] so the user can customise the component's appearance. In addition the component may be repeated in the parent component quite a few times (eg 10-20 times).…
Ka Tech
  • 8,937
  • 14
  • 53
  • 78
0
votes
1 answer

why does ngStyle always selectes else case in angular

I have a component that uses ngStyle but it always returns the else condition even though i have checked, that fiedLand is set and after change i also try detectChanges() but it doesnt update. The span element does update and it uses fieldLang so i…
Andreas Owen
  • 53
  • 7
0
votes
1 answer

how can i get value of FormBuilder angular and use it with property NgStyle

Hi guys i have a form with this.crudForm = this.formBuilder.group({ id: null, company: Company, document: Document, serie: Series, documentNumber: null, comment: '', note: '', reference: '', …
Paul VH
  • 21
  • 1
  • 1
  • 6
0
votes
1 answer

Correct use of ng-if directive in html

I've following html code snippet where I would like to use some "ng-*" directive to conditionally apply color to the text. 1
2
0
votes
1 answer

AngularJS how to enable color printing css while using ng-style?

I have an app that generates some data in a table, and each cell has a specific combination of background color and text color, given by its properties. the code for that is a simple: ng-style='{"background-color": lt.backgroundColor, "color":…
AJ-
  • 1,638
  • 1
  • 24
  • 49
0
votes
1 answer

Dynamically setting CSS property left using width calculation Angular 6

I'm currently building a CSS audio player and I am setting the width of a div to represent the current progress of the audio using a [style] like below, and it works just great:
Tom O'Brien
  • 1,741
  • 9
  • 45
  • 73
0
votes
0 answers

Angular ng-style does not apply on FontAwesome icons

I am simply tyring to change the color of the a fa-square from fontAwseome dynamically using angular and NG-Style. Here is how:

…

0xtuytuy
  • 1,494
  • 6
  • 26
  • 51
0
votes
0 answers

Angular - ngStyle invoking function repeatedly

I want to use ngStyle inside ngFor and call a function that transforms data in a circle. The Problem is if I am getting about 10000+ data it lags and keeps freezing. The transform of them is one part, but at least afterward they loaded it should run…
Kamui
  • 106
  • 1
  • 1
  • 13
0
votes
0 answers

$color from variables.scss in pug is unreadable with ngStyle

Working with Angular2+, how can I get my $fam_1 value in the pug file with ngStyle? In my variables.scss file : $fam_1: #A474DB; In my file.pug: divName('[ngStyle]'="{'background-color' :'$fam_1'}") Note : Putting directly '#f18973' instead of…
Smith James
  • 13
  • 6
0
votes
1 answer

Angular *ngIf on component with ngStyle bound to method?

I'm using Angular 5, although I don't know if my problem is linked to the version or Angular or to the way I coded my components. I am creating a component that looks and behave like a table. It consists of two main parts : the toolbar and the table…
Stephe
  • 25
  • 6
0
votes
1 answer

Why angular x ngStyle does not update dynamically?

I don't understand why this few lines not working. HTML template: component.ts: ... export…
Bálint Réthy
  • 411
  • 1
  • 6
  • 25
0
votes
1 answer

how can i add print css or !important for ng-style?

How can i add print css to ng-style? or how can i use !important in ng-style attribute. i'm trying to print the page but the ng-style attribute css doesn't…
pranay deep
  • 1
  • 3
1 2 3
…
17 18