svg circle - Can't bind to cx since it isn't a known native property

Question

I need to do a progress arc based on the calculated percentage, I have created a custom directive to access the svg attributes from the user, while updating that in my template, I am getting the following error:

Can't bind to 'cx' since it isn't a known native property
Can't bind to 'cy' since it isn't a known native property

etc..

I am getting these sorts of errors for all the svg attributes.

Below is my code in jade:

progress-arc([size]="200", [strokeWidth]="20", [stroke]="red", [complete]="0.8") 

Below is my directive code:

import {Component,Input,AfterViewInit} from '@angular/core';  @Component({   selector:'progress-arc',   template:`    <svg height="100" width="100">       <circle fill="white"           cx="{{parsedSize/2}}"           cy="{{parsedSize/2}}"           r="{{radius}}"           stroke="{{stroke}}"           stroke-width="{{strokeWidthCapped}}"           stroke-dasharray="{{circumference}}"           stroke-dashoffset="{{(1 - parsedComplete) * circumference}}"/>   </svg>`,   providers: [],   directives: [] }) export class ProgressArc implements AfterViewInit {  @Input('size') size:string;  @Input('strokeWidth') strokeWidth:string;  @Input('stroke') stroke:string;   @Input('complete') complete:string;   parsedStrokeWidth:number;   parsedSize:number;   parsedComplete:number;   strokeWidthCapped:number;   radius:number;   circumference:number;    ngAfterViewInit() {     this.parsedSize = parseFloat(this.size);     this.parsedStrokeWidth = parseFloat(this.strokeWidth);     this.parsedComplete = parseFloat(this.complete);     this.strokeWidthCapped = Math.min(this.parsedStrokeWidth, this.parsedSize / 2 - 1);     this.radius = Math.max((this.parsedSize - this.strokeWidthCapped) / 2 - 1, 0);     this.circumference = 2 * Math.PI * this.radius;   } } 

Can someone tell me where I am going wrong?

Answer 1

In order to bind to SVG element attributes in Angular, you must prefix them with attr:

For your circle this will be:

<svg height="100" width="100">       <circle fill="white"           [attr.cx]="parsedSize/2"           [attr.cy]="parsedSize/2"           [attr.r]="radius"           [attr.stroke]="stroke"           [attr.stroke-width]="strokeWidthCapped"           [attr.stroke-dasharray]="circumference"           [attr.stroke-dashoffset]="(1 - parsedComplete) * circumference"/> </svg> 

I am not entirely sure if it should be [attr.stroke-width] or [attr.strokeWidth], but give it a shot.

You need to use the attr prefix when the attribute has no property associated