feat: Added virtual scroll component and sample implementation - #17281
Draft
rkaraivanov wants to merge 26 commits into
Draft
feat: Added virtual scroll component and sample implementation#17281rkaraivanov wants to merge 26 commits into
rkaraivanov wants to merge 26 commits into
Conversation
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
…he view when the data source changes.
Fixed several issues with virtual coordinates mapping and the scroll engine in general. The Binary Indexed Tree (BIT) is used to efficiently calculate the cumulative heights of items in the virtual scroll, which allows for faster updates and smoother scrolling experience.
…-scroll-component
…-scroll-component
…-scroll-component
…-scroll-component
…-scroll-component
…-scroll-component
…-scroll-component
…-scroll-component
…-scroll-component
Contributor
There was a problem hiding this comment.
Pull request overview
This PR introduces a new IgxVirtualScrollComponent entry point to Ignite UI for Angular, providing a self-contained virtualized viewport for vertical and horizontal scrolling (including variable-size items and remote/infinite loading), and adds a demo route + sample showcasing usage.
Changes:
- Added a new
igniteui-angular/virtual-scrollentry point with a virtual scroll component, item-template directive, supporting types, and a scroll-math engine. - Added unit tests covering the engine behavior, template context, orientations (including RTL), outputs, and basic rendering.
- Added a demo/sample implementation and wired it into the demo app routing + navigation list.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/app/virtual-scroll/virtual-scroll.sample.ts | Demo component showcasing vertical/horizontal + remote data scenarios. |
| src/app/virtual-scroll/virtual-scroll.sample.html | Sample template demonstrating igxVirtualItem usage for multiple scenarios. |
| src/app/virtual-scroll/virtual-scroll.sample.scss | Styling for the new demo page. |
| src/app/app.routes.ts | Adds a /virtual-scroll route for the demo. |
| src/app/app.component.ts | Adds “Virtual Scroll” to the demo navigation list. |
| projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts | Core virtual scroll component implementation (signals-first + view pooling). |
| projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.html | Component template for track/content positioning. |
| projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.scss | Component styles for vertical/horizontal layouts. |
| projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll-item.directive.ts | Directive to capture ng-template[igxVirtualItem] as the item template. |
| projects/igniteui-angular/virtual-scroll/src/virtual-scroll/types.ts | Typed template context + output payload types. |
| projects/igniteui-angular/virtual-scroll/src/virtual-scroll/scroll-engine.ts | Scroll math engine (BIT-based sizing, visible range computation, coordinate compression). |
| projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.spec.ts | Unit tests for engine + component behaviors (including RTL). |
| projects/igniteui-angular/virtual-scroll/src/public_api.ts | Public exports for the new entry point. |
| projects/igniteui-angular/virtual-scroll/index.ts | Entry-point barrel export. |
| projects/igniteui-angular/virtual-scroll/ng-package.json | ng-packagr entry point config placeholder (consistent with other entry points). |
| projects/igniteui-angular/virtual-scroll/README.md | Feature documentation and usage examples for the new component. |
| projects/igniteui-angular/src/public_api.ts | Exposes igniteui-angular/virtual-scroll from the root package exports. |
Comments suppressed due to low confidence (1)
src/app/virtual-scroll/virtual-scroll.sample.html:107
- Section numbering in the sample comments labels this as section 6 even though it is the 5th sample block. Renumber to keep the sample easier to follow.
<!-- 6. Remote / infinite scrolling -->
<!-- ------------------------------------------------------------------ -->
….com/IgniteUI/igniteui-angular into rkaraivanov/virtual-scroll-component
…-scroll-component
Member
Author
|
@simeonoff |
Member
Restructured the CSS and sample. Should be more in line with the other component styles now and the approach we wanna use in the future for authoring component styles. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Expose a new virtual scroll component for horizontal/vertical scrolling.
Motivation / Context
igxForOfrequires the developer to manually wire a separate scroll container, aVirtualHelperComponent/HVirtualHelperComponentDOM helper element, and passigxForContainerSizeexplicitly. That's 3–4 pieces of setup vs. one tag.igxForOfusesViewContainerRef.move()but always keeps a fixed chunk alive, paying create/destroy cost when chunk size changes.ChangeDetectionStrategy.OnPushthroughout the implementation.Type of Change (check all that apply):
Component(s) / Area(s) Affected:
How Has This Been Tested?
Test Configuration:
Screenshots / Recordings
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)