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.

Günter Zöchbauer · Accepted Answer · 2017-12-05T04:19:40.633

45

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

edited Dec 05 '17 at 04:19

answered Mar 22 '17 at 16:15

Why not `[attr.height]="Height"`? – a better oliver Mar 22 '17 at 16:22
Sure, if you want to pass the `px` to the `Height` and `Width` variable values, but the question doesn't indicate that, and I prefer `attr.height="{{Height}}px"` over `[attr.height]="Height + 'px'"` (interpolation instead of `+`), but that is a matter of preference. – Günter Zöchbauer Mar 22 '17 at 16:25
1

quick and clear, worked for me! Thank you @GünterZöchbauer – Georgios Mar 22 '17 at 16:29
Glad to hear :) – Günter Zöchbauer Mar 22 '17 at 16:29
1

`attr.width.px="{{ Width }}"` is a nice shortcut IMHO, or even better `[attr.width.px]="Width"` – Mateo Tibaquira Dec 05 '17 at 04:01
@MateoTibaquirá thanks for the hint. String concatenation was a poor suggestion. I'll update my answer. – Günter Zöchbauer Dec 05 '17 at 04:18
I just tried and it seems that the `px` is not needed anymore (actually didn't work when I tried). This worked: `` – yannick1976 Oct 29 '21 at 16:00

score 0 · Answer 2 · answered Feb 23 '23 at 16:47

0

Width and height are simple component input properties. Seems to me there is no need to handle adding 'px' behind the values:

<svg
[attr.width]="width"
[attr.height]="height"
>

answered Feb 23 '23 at 16:47

JanBrus

2 Answers2