contentChildren doesn't return things that Angular Animations is keeping on the screen

I have an angular component that has a short animation when it disappears. In reality, way more happens of course, but this is the essence of my problem.

@Component({
selector: `app-foo`,
templateUrl: `./foo.component.html`,
styleUrl: `./foo.component.scss`,
changeDetection: ChangeDetectionStrategy.OnPush,
animations: [animationWithDestructionDelay],
host: {
"[@animationWithDestructionDelay]": `true`,
},
})
export class FooComponent implements OnDestroy {
contentChildren = contentChildren(FooComponent, {
descendants: true,
});

randomEffect = effect(() => {
this.contentChildren().forEach((child) => {
if (child.becomingDestroyed()) {
// do stuff
}
});
});

becomingDestroyed = signal(false);

ngOnDestroy(): void {
this.becomingDestroyed.set(true);
}
}


It sometimes contains itself, like:

<app-foo class="outer">
@if(condition()) {
<app-foo class="inner">
</app-foo>
}
</app-foo>


Now, when condition changes, the inner one animates for a short while and disappears. My problem is, contentChildren in the outer one stops containing the inner component as soon as condition changes to false, not when the inner one actually disappears from the DOM/screen. Angular animations can delay removal from the DOM. Is it possible to change this behavior in some way, to get all components that exist on screen, including ones that are becoming destroyed?

Continue reading...