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 makes visualization disappear

I am trying to display a list of items in an Angular web app. I am having a list component which contains the related *ngFor directive to display each list-item component. Inside the HTML of the list-item component I defined the following…
greenfield
  • 79
  • 1
  • 9
0
votes
1 answer

Best way to use dynamic fonts in Angular 9

I want to create one site that can be multiple brand based on a brand code I feed in - so I'm using a service (brand.service) to set a brand interface (brand.ts) and so far the properties are: export interface Brand { status: number; …
Web Develop Wolf
  • 5,996
  • 12
  • 52
  • 101
0
votes
0 answers

ngStyle inline styling with 3 conditions not working

Below code is not working I want to check for below conditions event.format === 'Online' then style red color event.format === 'InPerson' then style green color if neither InPerson nor Online then style #aaa color I tried [ngStyle]="{'color':…
Divya Sehgal
  • 1
  • 2
0
votes
1 answer

setting width with calc() in [ngStyle] with angular variable not working

I am setting width of a div dynamically via angular variable. Here is my template looks like:
0
votes
1 answer

angular 7 style attribute value from an array dynamically

I am creating a progress bar using code below.
Manojkumar
  • 1,351
  • 5
  • 35
  • 63
0
votes
1 answer

NgStyle setting two properties Angular

I'm trying to set two properties based on the condition. I have this code:
Andreea Popa
  • 49
  • 8
0
votes
1 answer

Why is ngStyle background-image not loading?

I'm having trouble getting my image to display. It was displaying before. In my containers/introduction template I have:
integral100x
  • 332
  • 6
  • 20
  • 47
0
votes
1 answer

Can't set a background image (with gradient) in Angular 9

As the title states, I can't seem to set this background image. I have tried a number of ways. Currently I have this in my code: export class HeroComponent implements OnInit { @Input() content: PageContent[]; public backgroundImage: string; …
r3plica
  • 13,017
  • 23
  • 128
  • 290
0
votes
1 answer

NgStyle in Angular 2+ does not taking in consideration 0(zero) from input parameter

I have an input parameter called top and bottom, which as they state, is the top and bottom in CSS. When I add as input in component 0 to the top, the 0 is not present in the CSS style. E.G the top: 0px is not showing there.
Csibi Norbert
  • 780
  • 1
  • 11
  • 35
0
votes
1 answer

Understanding NgStyle

I'm relatively new to Angular and would like to understand what the following syntax means.
//do something
Is it a pipe…
Jadenkun
  • 317
  • 2
  • 16
0
votes
1 answer

AngularJs dynamic styling using ng-style

I am using below syntax but I am not able to implement it. I want to change margin-left dynamically, depending on the div class. ng-style="{ 'margin-left: 120px' :col-xs-12 || 'margin-left: 400px' :col-lg-8 col-md-8 col-sm-8 }"
Shashwat Tyagi
  • 255
  • 5
  • 15
0
votes
1 answer

Angular ngstyle stripping -webkit-

The code below is working in Chrome but it seems to be stripping -webkit- or -moz- or -o- which is disabling me to show it in all browsers properly. [ngStyle]="{'-webkit-transform': 'rotate(' + ((marks.result * 1.8) - 90) + 'deg)'}" gets compiled…
Nikita Gupta
  • 827
  • 1
  • 7
  • 13
0
votes
1 answer

How to bind data in ngStyle using Angular

I'm trying to bind data using Angular 8 but failing miserably. One of the methods I tried is as below:
and…
Elaine Byene
  • 3,868
  • 12
  • 50
  • 96
0
votes
1 answer

How to avoid using function in ngStyle or ngClass?

This is an annoying issue if I can say so ... If I use a method in the template, this will be called so many timesss.... due of the change detection of Angular. 3511 messages (method calls) in just 30 seconds, only for 12 items. how my code looks…
AlleXyS
  • 2,476
  • 2
  • 17
  • 37
0
votes
1 answer

Angular 8 - Is it possible to perform data binding with a template loaded from an external source?

I have a page that allows users to customise a design before downloading it. I have a list of designs that when clicked on display a different HTML layout. These HTML layouts are stored in a database as a string of HTML. To display these, i…
Que
  • 957
  • 2
  • 14
  • 35
1 2 3
…
17 18