Intersect

Observe element visibility with IntersectionObserver, exposing intersection state as a signal and data attribute.

Why use this atom?

• Declarative IntersectionObserver without manual setup or teardown
• data-intersecting attribute for CSS-only visibility styling
• isIntersecting signal for programmatic access
• Configurable threshold and root margin
• Foundation for lazy loading, infinite scroll, and analytics visibility tracking

Import

import {AtomIntersect} from '@terse-ui/atoms/intersect';

Usage

<img
  atomIntersect
  (atomIntersect)="onVisible($event)"
  src="placeholder.jpg"
/>

When the element enters the viewport, data-intersecting is set and the output emits an IntersectionObserverEntry.

Template Reference

<div atomIntersect #intersect="atomIntersect">
  {{ intersect.isIntersecting() ? 'Visible' : 'Hidden' }}
</div>

Lazy Loading

<div atomIntersect #intersect="atomIntersect" [atomIntersectRootMargin]="'200px'">
  @if (intersect.isIntersecting()) {
    <img src="heavy-image.jpg" alt="Lazy loaded" />
  }
</div>

Custom Threshold

<div
  atomIntersect
  [atomIntersectThreshold]="0.5"
  (atomIntersect)="onHalfVisible($event)"
>
  Fires when 50% visible
</div>

Disabling

<div atomIntersect [atomIntersectDisabled]="true">
  Observer is paused
</div>

API Reference

AtomIntersect

Selector	[atomIntersect]
Exported as	atomIntersect
Data attributes	data-intersecting

Inputs

Input	Type	Default	Description
atomIntersectDisabled	boolean		Disables intersection observation.
atomIntersectThreshold	number | number[]		The intersection threshold(s).
atomIntersectRootMargin	string		The root margin for the observer.

Outputs

Output	Type	Description
atomIntersect	IntersectionObserverEntry	Emits when intersection state changes.
atomIntersectDisabledChange	boolean	Disables intersection observation.
atomIntersectThresholdChange	number | number[]	The intersection threshold(s).
atomIntersectRootMarginChange	string	The root margin for the observer.

Properties

Property	Type	Description
isIntersecting	Signal<boolean> (readonly)	Whether the element is currently intersecting.