Carlos Cifuentes
AngularJS library migration · infinite scroll

Migrating ng-infinite-scroll to modern Angular

ng-infinite-scroll called a function when the user scrolled near the bottom of the window or of a container. It is tied to AngularJS.

What replaces it

OptionWhen to choose it
ngx-infinite-scrollClosest match: a directive that emits an event when the user scrolls near the end.
IntersectionObserver in a small directiveNo dependency: observe a sentinel element placed at the end of the list.
CDK virtual scrollWhen the list gets long enough that rendering every row is the real problem.

How to migrate it

  1. Check each list: window scroll or a scrolling container, the distance threshold and the disabled flag.
  2. Move page loading to a service that tracks the current page, a loading flag and whether more data exists.
  3. Attach the new directive or observer and render the list with @for and a track expression.

Watch out. Guard against duplicate loads: the trigger fires again before the previous page arrives. Ignore it while a request is pending.

Other libraries

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn