virtual-scroll doesn't work well with animate.leave

[EricPoul]

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

virtual-scroll

Is this a regression?

No

Description

1. With a default cdkVirtualForTemplateCacheSize set to 20 virtuall-scroll keeps leave class on a template and uses this template for next row generation; in that case, new rows turn out to be hidden.
2. With a cdkVirtualForTemplateCacheSize set to 0 to disable cache virtuall-scroll do not remove rows while slow/normal scroll speed, and only removes on a high speed scrolling.

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-n4xn2i7p?file=src%2Fmain.ts

Please provide the exception or error you saw

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

Angular CLI       : 21.2.2
Angular           : 21.2.4
Node.js           : 22.22.0
Package Manager   : npm 10.8.2
Operating System  : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package                   │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/animations       │ 21.2.4            │ ^21.2.4           │
│ @angular/build            │ 21.2.2            │ ^21.2.2           │
│ @angular/cli              │ 21.2.2            │ ^21.2.2           │
│ @angular/common           │ 21.2.4            │ ^21.2.4           │
│ @angular/compiler         │ 21.2.4            │ ^21.2.4           │
│ @angular/compiler-cli     │ 21.2.4            │ ^21.2.4           │
│ @angular/core             │ 21.2.4            │ ^21.2.4           │
│ @angular/forms            │ 21.2.4            │ ^21.2.4           │
│ @angular/material         │ 21.2.2            │ ^21.2.2           │
│ @angular/platform-browser │ 21.2.4            │ ^21.2.4           │
│ @angular/router           │ 21.2.4            │ ^21.2.4           │
│ rxjs                      │ 7.8.2             │ ^7.8.1            │
│ typescript                │ 5.9.3             │ ^5.9.3            │
│ zone.js                   │ 0.16.0            │ ^0.16.0           │
└───────────────────────────┴───────────────────┴───────────────────┘

Anything else?

No response

[thePunderWoman]

I'm not 100% sure I follow what the issue is here. The description doesn't really clarify this for me. Can you explain what's supposed to happen, and what is happening in detail? Also you have this listed as a regression. Was this working with animate.leave before?

[EricPoul]

Hi, @thePunderWoman. I can't confirm this was working because I tried to implement it without the deprecated animation (which worked). Maybe I need to delegate it to material kit issues.
The problem is that I need to remove a row, and animate.leave works properly. But because animate.leave stays on all elements in the list, there are 2 ways to continue the flow, and both are unworkable.
Either I use virtuall-scroll cache and it keeps class for next renderers(virtuall-scroll should be able to work with animations) or I do not use virtuall-scroll cache and in that case, animation works properly but for some reason virtuall-scroll is recreates deleted rows(on scroll).

I'd like to use the cache of the virtuall-scroll but it looks like animate.leave should remove the class from the node it applied to.

[thePunderWoman]

@EricPoul Ah, ok so it's not a regression then. The legacy package is a different system. If it never worked with animate.leave, that's different. I also don't know that this is an issue with animate.leave. It sounds like this is more of an issue with the implementation of the virtual scroll CDK component and how it duplicates nodes. There's nothing we could change about the animate.leave API that would resolve that for the virtual scroll timing. I'll move this to the components repo for them to take a look.

[EricPoul]

Sure, seems reasonable.