Menu
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>
347
Get Data from a Server You can use SVG files as templates in your Angular applications. When you use an SVG as the template, you are able to use directives and bindings just like with HTML templates. Use these features to dynamically generate interactive graphics.
Then, you set the attribute value with an expression that resolves to a string. When the expression resolves to null or undefined, Angular removes the attribute altogether. One of the primary use cases for attribute binding is to set ARIA attributes. Another common use case for attribute binding is with the colspan attribute in tables.
Out SVG consists of two circles. One circle will be the outer grey while the other will be the progress value that will be updated by Angular. If we look at our SVG, the first thing we do is bind the circumference value to each circle. The circumference value will be set in the component class.
You can see that the former is property binding where as the latter is event binding and the combination of both results in two-way binding in Angular. Syntax for two-way data binding in Angular is [ ()]. The [ ()] syntax combines the brackets of property binding, [], with the parentheses of event binding, ().
[attr.fill]="color"
or
attr.fill="{{color}}"
should work for you
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
