Bind Angular2 Values In Svg Linear Gradient Stop Offset?

I want to use bind angular2 values in linear-gradient stop offset but its giving me errors. Can someone tell me how can I bind angular2 values in stop offset of linear-gradient as

Solution 1:

I guess this is what you want:

      <stop [attr.offset]="goodScore"stop-color="blue"/>
      <stop [attr.offset]="dangerScore"stop-color="red"/>

You need either [attrname]="fieldName" or attrname="{{fieldName}}" to get Angular2 binding. SVG elements don't have properties, therefore you need to do attribute binding, therefore the additional attr. prefix for binding to SVG elements.