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
How to inject SVG icon sprites in Angular component HTML DOM?

I am building an Angular application (Angular 4/5/6) and would like to use SVG sprites in my component template. Question: Assuming I already have my SVG icon sprite generated (icons.svg), how can I get Angular to inject/import my SVG …

Read More
SVG icon system with angular-cli

I have an angular2 project which was created via angular-cli. In webpack there is a loader to load the svg sprite and also to generate that sprite from list of svgs. But how do I can use this functionality in …

Read More