Angular Animation breaks nested ng-content + ngIf

🐞 bug report

Affected Package

  • @angular/animations
  • @angular/common ? donno

Is this a regression?

Can’t say


To simplify this issue, assume we have an accordion. This accordion can be collapsed or expanded.
This is done by animation triggers. We can pass our content to that accordion via ng-content.

To improve performance, we tried following:

  • After the collapsing animation is done, set the *ngIf to false to remove the content
  • Before the expanding animation starts, set the *ngIf to true to insert the content back

This works as long as the content is something simple without much logic.
But once things get complex, this breaks. To remain simple, in the example I just nested one accordion into another.

Once the outer accordion has been toggled, the inner accordion won’t animate anymore

🔬 Minimal Reproduction

Stackblitz sample

🔥 Exception or Error

The animation triggers just won’t be executed anymore.

🌍 Your Environment

Angular Version:


1 possible answer(s) on “Angular Animation breaks nested ng-content + ngIf