Angular Animation breaks nested ng-content + ngIf

🐞 bug report

Affected Package

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

Is this a regression?

Can’t say

Description

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
https://stackblitz.com/edit/angular-animation-ng-content?file=src/app/accordion.component.ts

🔥 Exception or Error

The animation triggers just won’t be executed anymore.

🌍 Your Environment

Angular Version:
11

cheers
flash

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