0

I'm struggling to produce a style inside an *ngFor based on the iteration. My template looks like this:

<div
    *ngFor="let color of options.colors"
    <!--attempt to apply style using color variable-->
>
</div>

Where options is simply an object with a property color of type Array<string>. These are the attempts I have made so far:

style="border-color: {{color}} !important"
style="{{'border-color: ' + color + ' !important'}}"

These both produce the following output in the console:

sanitizing unsafe style value

Angular.io outlines why this occurs here, citing the reason for this as protection against XSS attacks. The page does not break, but the colors are simply not applied; a default color in one of my CSS files is used instead.

I figured I would instead go about a more Angular-y method:

[style.border-color]="{{color}} !important"
[style.border-color]="{{color + ' !important'}}"
[ngStyle]="{ 'border-color': '{{color}} !important' }"
[ngStyle]="{{'{ border-color: ' + color + ' !important }'}}"

EDIT: also

[attr.style]="'border-color: {{color}} !important'"

But all of these attempts produced the following error or something similiar:

error message in developer console

(If it makes a significant difference, it was specifically the third of those attempts that threw this error.)

I have a very limited understanding of [style.*characteristic*] and [ngStyle], and I can't seem to find anything online explaining how to use them inside an *ngFor.

Can anyone point me towards what I'm doing wrong?

NetherGranite
  • 1,940
  • 1
  • 14
  • 42

1 Answers1

1

When you use property binding `[style.border-color]' the assigned value is a property. So you don't need interpolation.

Here is an example from my code:

                        <img *ngIf='showImage'
                             [src]='product.imageUrl'
                             [title]='product.productName | uppercase'
                             [style.width.px]='imageWidth' 
                             [style.margin.px]='imageMargin'>

Where imageWidth and imageMargin are properties.

So you would need something more like this:

[style.border-color]="color"

This binds to the color variable.

DeborahK
  • 57,520
  • 12
  • 104
  • 129
  • 1
    How would the OP inject the "!important" qualifier into the CSS rule? I couldn't get that to work. – Rob Zuber Jun 24 '17 at 03:02
  • @RobZuber Yeah, that's exactly the problem I'm facing. It's good to know that this works without it, but in this case I actually need it. – NetherGranite Jun 26 '17 at 15:08
  • When setting a style on a specific element ... there should be no need for !important. And !important is considered "bad practice", see this: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity – DeborahK Jun 26 '17 at 16:01
  • And if it is really needed ... put it in a CSS class and use the class on the element instead. – DeborahK Jun 26 '17 at 16:04
  • @DeborahK But it's dependent on an *ngFor; a CSS class won't cut it. And in this case, it doesn't work unless !important is used. – NetherGranite Jun 27 '17 at 03:56
  • ngFor simply repeats an element. I don't understand what that has to do with how a style is applied? And why won't a css class work? And how does the inline style not work without the important attribute? Maybe more info? Or a plunker? – DeborahK Jun 27 '17 at 04:36
  • @DeborahK The issue is that each element in the *ngFor needs to have a different color applied based on the `color` variable established by the *ngFor. While the above solution works, it does not demonstrate how to apply the `!important` marker, which is needed in this case to override a different style elsewhere that also uses `!important`. – NetherGranite Jul 02 '17 at 23:46
  • 1
    Maybe it is not possible. I did some googling when I first replied to the question and found nothing. I asked during one of our Angular doc team meetings and no one at the meeting had any idea how to add !important to this either. – DeborahK Jul 03 '17 at 07:19