Clever Geek Handbook

Angular2 * ngFor with SVG circle

I am trying to create a legend / key for a pie chart with a small circle with the same color in and around the graph. However, this is the error I get when I try to do this:

"Template parsing errors: Cannot bind to" fill "because it is not a known native property"

Below is my code:

<svg *ngFor="let item of items;" width="250" height="75">
    <circle cx="50" cy="50" r="20" fill={{item.color}} />
    <text x="100" y="50">{{item.name}}</text>
</svg>

item.color and item.name are two strings, and when I try to just display them as text, all values ​​show up.

Does anyone know how I can fix this error?

+3


source to share


1 answer


Try the following:



<svg *ngFor="let item of items;" width="250" height="75">
    <circle cx="50" cy="50" r="20" [attr.fill]="item.color" />
    <text x="100" y="50">{{item.name}}</text>
</svg>
+1


source






More articles:


All Articles