Animation is negatively affected when parent is using OnPush change detection strategy

bootsoon / ng-circle-progress

A simple circle progress component created for Angular based on SVG Graphics.

https://bootsoon.github.io/ng-circle-progress/

MIT License

250 stars 85 forks source link

Animation is negatively affected when parent is using OnPush change detection strategy #144

Open lukaszbachman opened 3 years ago

lukaszbachman commented 3 years ago

By default most of my components use changeDetection: ChangeDetectionStrategy.OnPush. This seems to negatively impact the animation of ng-circle-progress which gets "jittered". If I reset change detection to Default the issue is gone. Is there anything I could do to work around this?

lukaszbachman commented 3 years ago

I found the following workaround:

use titleFormat callback to run your custom function whenever progress (animation) changes
inside that function call this.changeDetectorRef.markForCheck(); to enforce a check on component's bindings

This seems to fix the problem with animation, albeit looks like an ugly hack.

logan-jobzmall commented 3 years ago

I am running into this same issue, and your hack doesn't seem to be working for me. @lukaszbachman