Essentially, I am attempting to initiate a change detection loop by using renderer.removeStyle and renderer.addStyle. The style being added is a CSS animation. However, when the style is removed and re-added within the same change detection loop, Angular fails to detect the change (for the same animation name).
Additional Information
Suppose I have a button event
(click)="addAnimation('animation1')"animation1, animation2 .... Naturally, the following code will not suffice:
addAnimation(animationName: string): void {
this.renderer.removeStyle(this.animate.nativeElement, 'animation');
// setTimeout(() => {
this.renderer.setStyle(this.animate.nativeElement, 'animation', animationName)
// }, 0);
}
as simply removing and adding a style under Angular's radar will not trigger any changes.
One workaround would be to include a timeout (similar to the commented code above), but this method presents unwanted side effects and appears somewhat convoluted.
I had hoped to resolve this issue by inserting something like this.appRef.tick(); in between to compel Angular to initiate another change detection loop.
Unfortunately, this approach does not work. What am I overlooking? Do you have any suggestions on how to tackle this correctly? Thank you!