Material Tabs + No Template Caching => Broken Virtual Scroll
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Description
If you attempt a ***cdkVirtualFor** with a **templateCacheSize: 0**, the Virtual Scroll will break when you include a **Material Tab** in the repeated element.
### Reproduction
[StackBlitz ](https://stackblitz.com/edit/el4pji?file=src%2Fexample%2Fcdk-virtual-scroll-template-cache-example.ts,src%2Fexample%2Fcdk-virtual-scroll-template-cache-example.html,src%2Fexample%2Fcdk-virtual-scroll-template-cache-example.css)
Steps to reproduce:
1. Try scrolling.
### Expected Behavior
No broke.
### Actual Behavior
Broke.
### Workaround
Disable **Material Tab** pagination as so:
### Environment
Angular CLI: 16.0.0
Node: 18.15.0
Package Manager: npm 9.5.0
OS: win32 x64
Angular: 16.0.0
... animations, cdk, cdk-experimental, cli, common, compiler
... compiler-cli, core, forms, material, platform-browser
... platform-browser-dynamic, router
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1600.0
@angular-devkit/build-angular 16.0.0
@angular-devkit/core 16.0.0
@angular-devkit/schematics 16.0.0
@angular/fire 7.6.1
@schematics/angular 16.0.0
rxjs 7.8.1
typescript 4.9.5
Contributor guide
Research direction
Start with the linked StackBlitz reproduction, especially src/example/cdk-virtual-scroll-template-cache-example.ts and its HTML and CSS files, and reproduce scrolling with templateCacheSize set to 0. Compare the behavior with Material Tab pagination disabled. Done means the virtual scroll remains functional with Material Tabs and no template caching, without relying on the workaround.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100