infinite scrolling grid in angular 2

Barna Toth
Frontend journeys
Published in
1 min readNov 30, 2016
photo from Pexels

If you’ve ever written a frontend application you’ve probably faced the performance problem caused by DOM handling with long lists.

Appending loads of HTMLElements to the DOM will totally freeze your browser. That’s why virtual lists were invented.

Virtualized lists only render the part of the list which can be seen by the user + some additional parts up and down so that the user cannot sense that the items are rendered on the scroll event.

There are several open source solutions for virtualizing lists but I couldn’t find a solution that fits my taste and needs for virtualizing grids in angular 2.

That’s why I’ve created “angular2-cool-infinite-grid”:

A super simple infinite scrolling grid written for angular 2 with easy setup and usage:

The component let’s you synchronously and asynchronously load items into the grid which is great for reducing load on the server and creating truly infinite lists.

Hope you find it useful.

Thanks for reading.

--

--