title: Angular 2 svg - pass height and width dynamically
body: <p>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:</p>
  
  <p><strong>component's html</strong></p>
  
  <pre><code>&lt;svg height="200px" width="200px"&gt; blah_blah_blah_blah_ &lt;/svg&gt;
  </code></pre>
  
  <p>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:</p>
  
  <p><strong>main HTML</strong></p>
  
  <pre><code>&lt;donut-chart [Height]="200" [Width]="200"&gt;&lt;/donut-chart&gt;
  </code></pre>
  
  <p><strong>Component.js code</strong></p>
  
  <pre><code>@Input() Height: number = 100;
  @Input() Width: number = 100;
  </code></pre>
  
  <p>So, my problem is how to pass those inputs into the <strong>component's html</strong>.</p>
  
  <p><code>&lt;svg height="Height" width="Width"&gt;</code> doesn't work in that case.</p>
  
  <p>Any help is welcome.</p>