14

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.

Improve this question

2 Answers 2

Reset to default
49

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

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Why not [attr.height]="Height"?
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.
quick and clear, worked for me! Thank you @GünterZöchbauer
Glad to hear :)
attr.width.px="{{ Width }}" is a nice shortcut IMHO, or even better [attr.width.px]="Width"
|
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"
>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.