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!
angular