Hi,

I am popping my Animations cherry and am getting slightly confused by the variation of info out there on various articles.

​

I have an SVG doughnut chart which represents a percentage, when the animation starts I have a variable which defines strokeDashoffset.

I can see my animation working perfectly when I hardcode the value but I now want to pass them in or calculate within the component, depending on what is allowed. When I try to use a variable within my trigger state NG complains that it isn't defined.

Any ideas??

​

Also getting this error, if anyone can help on that too then much appreciated.

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '@rotateCircle: startCircle'. Current value: '@rotateCircle: endCircle'.

​

in my chart.component.html

<circle class="progress-ring\_\_circle progress-ring\_\_circle--animate" stroke-width="50" fill="transparent" stroke-linecap="round" r="125" cx="150" cy="150" \[@rotateCircle\]="!loaded ? 'startCircle' : 'endCircle'" style="stroke-dasharray: 785.398;"></circle>

in my chart.component.ts

​

trigger('rotateCircle', [
state('startCircle', style({strokeDashoffset: '785.398' })),
state('endCircle', style({strokeDashoffset: '404.889'})),
transition('startCircle => endCircle', [animate('1s')])
]),