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

How do I access the ngStyle key and values in decorator?

I have a list of colour names in my application. let colours = { mango: '#e59c09', midnight: '#1476a0' }; I want to extend the ngStyle directive to be able to understand my custom colour names. I'm doing this by decorating the ngStyle…
LocustHorde
  • 6,361
  • 16
  • 65
  • 94
6
votes
1 answer

Dynamic refresh background-image with ngStyle In AngularJs

When i use Angular to dynamic change div 's backgroundImage, i find there are two ways to set backgrond-image: first:
the second:
Yu Deng
  • 63
  • 1
  • 5
6
votes
2 answers

Problems using angular ng-style, not updating in IE

I've created a simple directive in Angular which generates a scroller to display some products. I'm having an issue with one part of the code.
6
votes
1 answer

ng-style not working inside nested ng-repeat

I've got the following markup:
  • Larsi
    • 4,654
    • 7
    • 46
    • 75
    • 5
    votes
    2 answers

    Function call inside ngStyle gets sanitized

    I have a problem with style sanitization with Angular 8. I've used ngStyle multiple times, but this time i cannot set the border of a td element. I am trying to set the border style based on a field. If this field has a relevant content for me then…
    Federico Andreoli
    • 465
    • 4
    • 17
    5
    votes
    3 answers

    Angular 6, color from css file in ngStyle directive

    I would like to use my color which is defined in CSS file for my ngStyle directive (which is in HTML). This is what i've got in my HTML: [ngStyle]="{backgroundColor: isDarkStyle() ? '#29434e' : isNormalStyle() ? '#cfd8dc' : isLightStyle() ?…
    Kacper Kapela
    • 367
    • 2
    • 5
    • 12
    5
    votes
    4 answers

    angular: set different color to paragraphs with ngFor

    When I click on a button, I am adding strings to an array and I need to show these strings in a page. But I need to show the text red only after 5th element (first 5 elements should have the text black). Here is what I've tried: the component…
    Buda Gavril
    • 21,409
    • 40
    • 127
    • 196
    4
    votes
    1 answer

    Set the selected attribute in a dropdown list if the condition is met in Angular2

    I have 2 objects in my project: a company and an user. I have a form where the user can update his profile. One of the things he can update is the country. Now to show the countries I use a dropdown list. I want to set the selected attribute in the…
    Claudiu Matei
    • 4,091
    • 3
    • 19
    • 33
    4
    votes
    2 answers

    ng-style not getting updated dynamically

    I'm using ng-style to change the color of HTML element dynamically. where getColor() function returns the color to be changed and it can return different colors based upon usecase.…
    user5349506
    4
    votes
    3 answers

    Rgba value is not updated in ng-style

    I have a div which has an ng-style attribute with an rgba value that uses a $scope variable for the alpha value: ng-style="{'background-color': 'rgba(255,0,0,{{ alphaValue / 100}})'}" I have an input slider which changes the value of alphaValue. I…
    GusGus
    • 230
    • 6
    • 16
    3
    votes
    3 answers

    Angular: how to programmatically set Base64 image as background image of a div

    I have a div in which I show a Base64 image using CSS: .my-image { background: url('data:image/jpg;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='); } Now this image…
    smartmouse
    • 13,912
    • 34
    • 100
    • 166
    3
    votes
    3 answers

    ngStyle applying to all elements in ngFor

    I am attempting to configure this Angular/Html/JS so that the elements begin to have a blue background when counter >= 5

    {{ log }}

    when…
    Chris Phillips
    • 1,997
    • 2
    • 19
    • 34
    3
    votes
    1 answer

    ngStyle VS Renderer2 ? What should I use?

    I'm using Angular 5.2.9. I was wondering when should I use Renderer2 over ngStyle ? Which is the best solution ? 1:
    FOO BAR
    @ViewChild('div') div: ElementRef; constructor(private renderer: Renderer2) {} ngAfterViewInit() { …
    bossno
    • 587
    • 6
    • 12
    3
    votes
    2 answers

    Angular 2+ dynamically generate css

    For a given js variable, which has style information in it: menuBgColor = "red"; In AngularJS I was able to use dynamically embedded style:
    Ashwin
    • 12,081
    • 22
    • 83
    • 117
    3
    votes
    1 answer

    Change color on click with switch

    I have some labels (ID, Start after ID, Vehicle name...etc) that I would like to change color when selected (something like "active" tab). Thing is that beside every label I have "sort" icon and that icon changes it color when sort is in order…
    John Theoden
    • 325
    • 2
    • 10
    • 23
    1
    2
    3
    …
    17 18