svgangular6animatetransform

How to pass data dynamically from angular 6 typescript to animateTransform "from" attribute?

I've tried several ways, below are my attempts:

In my typescript file, I set the value as:

this.value = "130"; //for first method
this.rotation = "130 192 190"; //for second method

While in component.html

<animateTransform attributeName="transform"
                  type="rotate"
                  from="{{value}} 192 190"
                  to="0 192 190"
                  dur="3s"></animateTransform>

second method:

<animateTransform attributeName="transform"
                  type="rotate"
                  [attr.from]="rotation"
                  to="0 192 190"
                  dur="3s"></animateTransform>

both methods arent working. Any way to do this?

Solution

  • Just take the good parts of both:

    this.value = "130"

    With

    <animateTransform attributeName="transform"
                  type="rotate"
                  [attr.from]="value + ' 192 190'"
                  to="0 192 190"
                  dur="3s"></animateTransform>