Angular 2 svg:circle fill attribute binding

Question

I am trying to bind the value of the fill attribute in an <svg:circle> element to my color: string = "#cecece" variable in my component. I have read many articles and tried different ways afterwards, however, noone was successful:

style="fill: {{color}}"

[style]="fill: color"

[style]="fill: 'color'"

[attr.style]="fill: color"

[attr.fill]="color"

[attr.style.fill]="color"

fill="{{color}}"

Is there some way of making this work? I am even thinking about the possibility that I have a problem somewhere else.

The way it usually works without angular binding is: <circle fill="#cecece"></circle>

Yes it does, but I need to bind the `color` controller variable to the fill. My fifth example should do it but it did not work. — padr, Aug 10 '17 at 09:40

score 38 · Accepted Answer · answered Aug 10 '17 at 09:41

38

[attr.fill]="color"

or

attr.fill="{{color}}"

should work for you

answered Aug 10 '17 at 09:41

yurzui

205,937
32
433
399

1

Thanks, the second method works, but the first should too and it did not work. – padr Aug 10 '17 at 09:49

Angular 2 svg:circle fill attribute binding

1 Answers1