Remove and add class dynamically triggering change detection in between (Angular 2+)

Question

In short, I am trying to trigger a change detection loop between renderer.removeStyle and renderer.addStyle. The style I am adding is an css animation. When it's removed and added in the same change detection loop Angular won't detect that something changed (for the same animation name).

More Details

Let's say I have a button event (click)="addAnimation('animation1')" that should add existing animation and add the new animation named animation1, animation2 .... Of course the following code won't work:

  addAnimation(animationName: string): void {
    this.renderer.removeStyle(this.animate.nativeElement, 'animation');
    // setTimeout(() => {
      this.renderer.setStyle(this.animate.nativeElement, 'animation', animationName)
    // }, 0);
  }

since removing and adding a style under angular nose won't trigger any change.

One possible solution is adding a timeout (like the commented code above, but it has side effects that I am not interested in, and also the code is a little wired.

I was hoping to solve it by adding something like this.appRef.tick(); in between to force angular create another change detection loop.

That doesn't work, what am I missing? any suggestions how to do that correctly? Thanks!

do you have to use it to multiple elements and each element add different classes? — לבני מלכה
– לבני מלכה, Commented Oct 25, 2021 at 4:26
can you clarify the question? I am not sure I understand it. — Natan Braslavski
– Natan Braslavski, Commented Oct 25, 2021 at 18:39
i have my answer here it may help you: stackoverflow.com/questions/51187256/… — לבני מלכה
– לבני מלכה, Commented Oct 26, 2021 at 4:28
@לבנימלכה please read the question. It's not about using renderer, it's about change detection. — Natan Braslavski
– Natan Braslavski, Commented Oct 26, 2021 at 19:28

SAGAR SOLANKI · Accepted Answer · 2021-10-25 04:07:10Z

0

Try following way.

isClick=false;
onClick(){
    isClick=true;
}

<div [ngClass]="{'yourCSSClass': isClick}">

answered Oct 25, 2021 at 4:07

SAGAR SOLANKI

617 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Natan Braslavski Over a year ago

Thanks, but this is not what I am looking for. That's a very limited solution, it will require a lot of maintenance to add new classes. I am looking for a dynamic solution to inject animations on the fly. I will update my question to clarify that behavior.

Peter O Brien · Accepted Answer · 2023-05-18 20:03:36Z

0

A potential solution might be use of the css animation lifecycle events such as the animationend, all supported by Angular V5 and up.

Within your checkAnimateChange() function you can then flip the appropriate flag of the new animation or no additional animation, creating an animation sequence based on rules and using [ngClass] directive.

<div [ngClass]="{'animate1': animate1Flag, 'animate2':animate2Flag ... }" (animationend)="checkAnimateChange()">

answered May 18, 2023 at 20:03

Peter O Brien

2015 silver badges9 bronze badges

Collectives™ on Stack Overflow

Remove and add class dynamically triggering change detection in between (Angular 2+)

More Details

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

More Details

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related