A responsive virtual-scrolling grid for Angular

Angular CDK's virtual scroll only handles single-column lists. ngx-virtual-grid gives you a real CSS Grid that only renders visible items. No config objects, no pixel math.

Try the demoGet started

Features

  • Virtual scrolling with CSS Grid layout - only renders what's visible in the viewport
  • Auto-measures item dimensions - reads computed grid styles to figure out column count and row height
  • Responsive - adapts to column count changes via CSS, no reconfiguration needed
  • Infinite scroll - configurable threshold fires a loadMore event
  • Grid or list - same component, just change your CSS
  • Zoneless support - works with both zoned and zoneless Angular apps
  • SSR-safe - prerendering support out of the box

Install

npm install @theryansmee/ngx-virtual-grid

Supports Angular 14 through 22. See Getting Started for version-specific install instructions.