Zum Inhalt springen

# 🚀 Introducing `listine`: A Custom Virtual Scroll Library for Angular with True Dynamic Height Support

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

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert