angular / angular/components

Angular Material CDK scrolling - Display a million items is not working...

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

Description

How to Reproduce:
- Take the first example from https://material.angular.io/cdk/scrolling/examples open it in stackblitz an display 1 Mio instaed of 100,000
- Scroll down to the end. The last item displayed is 213,043

Cause:
- Maximum height of single Elements in Browsers

Possible Solution:
- Use more than one element inside the ViewPort to render Items

Contributor guide

Open the contributing guide

Research direction

Start with the first CDK scrolling example at https://material.angular.io/cdk/scrolling/examples in StackBlitz and reproduce the failure with 1,000,000 items. Read the viewport behavior around the reported browser maximum element height and evaluate the proposed multi-element rendering approach; done means scrolling reaches and displays the final item.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 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.