DEV Community

Cover image for Angular (16+) & IntersectionObserver API
Leo Lanese
Leo Lanese

Posted on

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);
Enter fullscreen mode Exit fullscreen mode

Using Angular (16+)

Angular Demo:


Top comments (0)