Angular (16+) & IntersectionObserver API

Angular & IntersectionObserver API

The Intersection Observer API can be used to perform actions based on the visibility of an element within a viewport. This can be particularly useful for lazy-loading images, infinite scrolling, or react when an element comes into view.

Using vanilla JS:

let options = {
  root: document.querySelector("#scrollArea"),
  rootMargin: "0",
  threshold: 1.0,
};

let observer = new IntersectionObserver(callback, options);

Using Angular (16+)

Angular Demo:
https://stackblitz.com/edit/stackblitz-starters-fwj4q9?file=src%2Fmain.ts

Github:
https://github.com/leolanese/angular16-IntersectionObserver