angular / angular/components

Scrolling SDK (virtual-scroll) - View isn't updated when list is updated (items added/removed)

Open
#14,635 21 comments 19 reactions 0 assignees View on GitHub
area: cdk/scrolling P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### What is the expected behavior?
If a data-list that binded to ``, is updated (items are added/ removed from this list), the `` updated as well.

#### What is the current behavior?
Changing the list will not updated the view (``)

#### What are the steps to reproduce?
StackBlitz starter: https://stackblitz.com/edit/angular-hsr4tz?file=app%2Fcdk-virtual-scroll-overview-example.html

In this demo you can see that after adding items to the list, the view isn't updated.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular 7.1.4
Material 7.2.0
Browser: Chrome

#### Is there anything else we should know?
The documentation doesn't discuss about adding/removing items from data-list.
See docs at: https://material.angular.io/cdk/scrolling/overview

Contributor guide

Open the contributing guide

Research direction

Reproduce the behavior in the linked StackBlitz example by adding and removing items from the list bound to cdk-virtual-scroll-viewport. Read the CDK scrolling overview and trace the virtual-scroll behavior involved; done means the viewport reflects list changes and the documentation explains this behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.