CODEWITHSUNDEEP
angularsvg
Tahtoh
Tahtoh

Reputation: 57

SVG in angular with custom inputs

I'm receiving a param in my component, i know for cx cy etc i need to prefix with attr but for stroke-width stroke-dasharray when i try to put a value sent from my component like in my case {{dashArray}} i get Can't bind to 'stroke-dasharray' since it isn't a known property of ':svg:circle'. which is normal cause it isnt. How can i fix this? putting values directly works but i need to make some calculations on my component before sending it to the html.

  <circle
    class="gauge_base"
    attr.cx="{{radius}}"
    attr.cy="{{radius}}"
    stroke="gray"
    attr.r="{{innerRadius}}"
    stroke-width="{{strokeWidth}}"
    transform=""
    stroke-linecap="round"
    fill="transparent"
    stroke-dasharray="{{dashArray}}"
  />

Upvotes: 1

Views: 663

Answers (1)

Nirmalya Roy
Nirmalya Roy

Reputation: 713

You need to make following changes.

<svg height="100" width="100">
  <circle
    class="gauge_base"
    attr.cx="{{radius}}"
    attr.cy="{{radius}}"
    stroke="gray"
    attr.r="{{innerRadius}}"
    attr.stroke-width="{{strokeWidth}}"
    transform=""
    stroke-linecap="round"
    fill="transparent"
    attr.stroke-dasharray="{{dashArray}}"
  />
</svg>

Upvotes: 3

Related Questions