Search code examples
angularsvggeometryfill

Angular 2 svg:circle fill attribute binding

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>

Solution 
  • [attr.fill]="color"

    or

    attr.fill="{{color}}"

    should work for you