Hi Angular devs! π
I recently faced a problem that many of us have probably struggled with β implementing virtual scroll in Angular where the items have dynamic heights and where the project uses standalone components (Angular 14+).
Most solutions out there didn't quite work. So I built my own.
π¦ What is listine
?
listine
is a lightweight, high-performance virtual scroll component designed specifically for Angular 14+ standalone architecture. It supports items of varying height and removes the limitations found in existing solutions.
Available now on npm:
πhttps://www.npmjs.com/package/listine
(https://stackblitz.com/edit/stackblitz-starters-5m9sy2lp?embed=1&file=src%2Flistine-virtual-scroll%2Flistine-virtual-scroll.html)
π€ The Problem with Existing Solutions
Most available libraries come with one or more major limitations:
Angular CDK Virtual Scroll
Requires a fixed itemSize. This doesn't work well for dynamic or variable-height content.
ngx-virtual-scroller
Itβs no longer actively maintained and doesn't support Angularβs standalone component architecture introduced in Angular 14+.
ag-Grid
While powerful, it is a paid solution and may not be suitable for every project or budget.
π₯ What listine
Offers
β
True Dynamic Height Support
Items can be of any height β no need to define itemSize
.
β
Standalone Component Ready
No NgModule
dependency. Designed for Angular 14+ standalone components.
β
Smart Recycling
Efficient rendering and DOM recycling for high-performance scroll, even in large lists.
β
Event Emitters & Hooks
Integrate loading indicators, fetch more data on scroll, or track visible range.
π‘ Ideal Use Cases
- Variable-height list items (e.g., chat apps, dynamic cards)
- Expandable rows or nested templates
- Infinite scroll
- Angular dashboards or admin panels
π Why I Built It
Iβve worked on multiple Angular projects where performance + flexibility mattered. After getting stuck with existing solutions, I realized the community needs a better virtual scroll that works with the latest Angular features.
So I built listine to fill that gap.
If you're using standalone components, working with dynamic layouts, or just want smooth virtual scroll β give it a try.
π Feedback Welcome!
This is the initial release β feedback and contributions are super welcome π
If it helps you, please star it β, share it, or suggest features you'd love to see.
π¦ listine on npm
π¬ Drop your thoughts in the comments!
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.