bug(Virtual scrolling + Signals): When removing an element from the array it is not removed from the screen

[MarcosPaulo775]

Is this a regression?

• [ ] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When trying to use Virtual Scrolling with Signals when removing element, it is not removed from the screen. The bug only occurs using *cdkVirtualFor. If you use *ngFor the element is removed correctly.

Reproduction

Ex:

HTML:

<cdk-virtual-scroll-viewport [itemSize]="150">
    <ng-container *cdkVirtualFor="let order of orderColumn().orders; trackBy: orderTrackBy" >
        <order-card [order]="order" (remove)="removeCard(order)"></order-card>
    </ng-container>
</cdk-virtual-scroll-viewport>

TS:

export type OrderColumn = { orders: Order[], total: number, page: number };
orderColumn: Signal<OrderColumn>;

Expected Behavior

I expected that when removing an element from the orderColumn().orders array it would exit the screen.

Actual Behavior

When removing an element, it continues to be rendered on screen.

Environment

Angular CLI: 16.0.5
Node: 18.12.1
Package Manager: npm 8.19.2
OS: win32 x64

Angular: 16.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1600.5
@angular-devkit/build-angular   16.0.5
@angular-devkit/core            16.0.5
@angular-devkit/schematics      16.0.5
@angular/cdk                    16.0.4
@angular/material               16.0.4
@schematics/angular             16.0.5
rxjs                            7.5.7
typescript                      5.0.4

[jeremyw189]

Any news on this? Still seems to be an issue.

[andrew-maltsev]

any updates? this is crucial