Angular 2 svg:circle fill attribute binding

angular svg geometry fill
padr picture padr · Aug 10, 2017 · Viewed 10.3k times · Source

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>

Answer

yurzui picture yurzui · Aug 10, 2017 
[attr.fill]="color"

or

attr.fill="{{color}}"

should work for you

Related questions

How do I import svg from file to a component in angular 5?

All tutorials with adding svg to a component in AngularCli that I found recommend to insert it in html template, something like this: <div> <svg viewBox="0 0 250 250"> <svg:g class="group"> <svg:polygon class="…

Read More
Can't bind to 'ngModel' since it isn't a known property of 'input'

I've got the following error when launching my Angular app, even if the component is not displayed. I have to comment out the <input> so that my app works. zone.js:461 Unhandled Promise rejection: Template parse errors: Can't …

Read More
ngFor with index as value in attribute

I have a simple ngFor loop which also keeps track of the current index. I want to store that index value in an attribute so I can print it. But I can't figure out how this works. I basically have …

Read More