CngxIntersectionObserver

Observes whether the host element is visible in the viewport or a scroll container.

Wraps the browser's IntersectionObserver API and exposes its state as Angular signals. The observer is automatically recreated when root, rootMargin, or threshold inputs change, and disconnected on destroy.

Use cases: lazy loading images, infinite scroll sentinels, scroll-triggered animations, "back to top" buttons, analytics viewport tracking.

Lazy load sentinel#

<div cngxIntersectionObserver #io="cngxIntersectionObserver"
     (entered)="loadNextPage()">
  @if (io.isIntersecting()) { Loading... }
</div>

Scroll-triggered animation#

<section cngxIntersectionObserver #io="cngxIntersectionObserver"
         [threshold]="0.5"
         [class.visible]="io.isIntersecting()">
  Content fades in at 50% visibility
</section>

Custom scroll container#

<div cngxIntersectionObserver [root]="'.scroll-container'" [rootMargin]="'100px'">
  Observed within a scrollable parent
</div>

https://cngxjs.github.io/cngx/examples/#/common/layout/intersection-observer/scroll-sentinel