Skip to content

animate.leave breaks @for reactivity #63544

@sigve10

Description

@sigve10

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

When using animate.leave within @for, it seems that @for may fail to render items it is supposed to render.

The provided example includes a @for that displays a sliced window of a list with a maximum of 3 elements. Removing the middle item causes the @for to only display a window of 2 elements, even in scenarios where it should still display 3. Further interaction might also inconsistently reduce the number of shown elements to 1, or even 0, or it may rarely return the number of displayed items to 3. I have yet to find any consistent trigger besides removing the second to last item of a list like this.

Playing around with the list will inevitably lead to NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-horm4s7k

Please provide the exception or error you saw

Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 20.2.1
Node: 20.19.1
Package Manager: npm 10.8.2
OS: linux x64
    

Angular: 20.2.3
... common, compiler, compiler-cli, core

Package                      Version
------------------------------------
@angular-devkit/architect    0.2002.1
@angular-devkit/core         20.2.1
@angular-devkit/schematics   20.2.1
@angular/build               20.2.1
@angular/cdk                 20.2.1
@angular/cli                 20.2.1
@schematics/angular          20.2.1
rxjs                         7.8.2
typescript                   5.8.3
zone.js                      0.15.1

Anything else?

No response

Metadata

Metadata

Labels

area: coreIssues related to the framework runtimecore: animationsIssues related to `animate.enter` and `animate.leave`

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions