Skip to content

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

Open
@MarcosPaulo775

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/scrolling

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions