Angular 2 svg - pass height and width dynamically

Question

I am using Angular 2 and to create a donut chart I did my implementation through svg. Height and width been passed directly so far:

component's html

<svg height="200px" width="200px"> blah_blah_blah_blah_ </svg>

What I want is to pass those values as inputs from the main component. So, lets say that on html I call the component like:

main HTML

<donut-chart [Height]="200" [Width]="200"></donut-chart>

Component.js code

@Input() Height: number = 100;
@Input() Width: number = 100;

So, my problem is how to pass those inputs into the component's html.

<svg height="Height" width="Width"> doesn't work in that case.

Any help is welcome.

Answer 1

SVG doesn't support property-binding, it requires attribute-binding

<svg attr.height.px="{{Height}}" attr.width="{{Width}}px"> blah_blah_blah_blah_ </svg>

or

<svg [attr.height.px]="Height" attr.width="{{Width}}px"> blah_blah_blah_blah_ </svg>

See also

• Angular 2 data attributes
• Double binding angular 2 with SVG
• Bind Angular2 values in SVG linear gradient stop offset?
• Angular2 SVG xlink:href