DEV Community

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

Posted on • Updated 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:
https://stackblitz.com/edit/stackblitz-starters-fwj4q9?file=src%2Fmain.ts

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


๐Ÿ’ฏ Thanks!

Now, don't be an stranger. Let's stay in touch!


leolaneseโ€™s GitHub image

๐Ÿ”˜ Linkedin: LeoLanese
๐Ÿ”˜ Twitter: @LeoLanese
๐Ÿ”˜ Portfolio: www.leolanese.com
๐Ÿ”˜ DEV.to: dev.to/leolanese
๐Ÿ”˜ Blog: leolanese.com/blog
๐Ÿ”˜ Questions / Suggestion / Recommendation: developer@leolanese.com

Top comments (0)