Skip to content

Latest commit

 

History

History
155 lines (120 loc) · 5.53 KB

README.md

File metadata and controls

155 lines (120 loc) · 5.53 KB

@angular-kit/rx/platform

A set of reactive creation functions and directives wrapping browser APIs.

🔋 Included

Wrapped Browser APIs

  • ResizeObserver - wrapped by createResizeObserver
  • IntersectionObserver - wrapped by createIntersectionObserver
  • MutationObserver - wrapped by createMutationObserver

These API's are wrapped by creation-functions for a convenient Observable-creation as well as a set of Angular directives for a convenient usage in templates.

Creation-functions

createResizeObserver

This creation function wraps the ResizeObserver API and returns an observable of ResizeObserverEntry objects.

Signature

function createResizeObserver(
  observeElement: ElementRef | Element,
  cfg?: ResizeObserverConfig,
): Observable<ResizeObserverEntry[]>;
type ResizeObserverConfig = {
  /**throttle emissions, defaults to 50*/
  throttleMs?: number;
  /** scheduler to use for throttling */
  scheduler?: SchedulerLike;
};
  • For ResizeObserverEntry see MDN

createIntersectionObserver

This creation function wraps the IntersectionObserver API and returns an observable of IntersectionObserverEntry objects.

function createIntersectionObserver(
  observeElement: ElementRef | Element,
  options?: IntersectionObserverInit,
  cfg?: IntersectionObserverConfig
): Observable<IntersectionObserverEntry[]> 
type IntersectionObserverConfig = {
  /**throttle emissions, defaults to 50*/
  throttleMs?: number;
  /** scheduler to use for throttling */
  scheduler?: SchedulerLike;
}
  • For IntersectionObserverInit see MDN
  • For IntersectionObserverEntry see MDN

createMutationObserver

This creation function wraps the MutationObserver API and returns an observable of MutationRecord objects.

function createMutationObserver(
  observeElement: ElementRef | Element,
  options?: MutationObserverInit,
  cfg?: MutationObserverConfig
): Observable<MutationRecord[]>
export type MutationObserverConfig = {
  /**throttle emissions, defaults to 50*/
  throttleMs?: number;
  /** scheduler to use for throttling */
  scheduler?: SchedulerLike;
}
  • For MutationObserverInit see MDN
  • For MutationRecord see MDN

Directives

rxObserveResize

This directive wraps the ResizeObserver API and emits ResizeObserverEntry objects.

Usage example:

<div rxObserveResize (resize)="onResize($event)"></div>

Inputs

  • rxObserveResizeConfig: ResizeObserverConfig - optional configuration for the ResizeObserver

rxObserveIntersection

This directive wraps the IntersectionObserver API and emits IntersectionObserverEntry objects.

Usage example:

<div rxObserveIntersection (intersect)="onIntersection($event)"></div>

Inputs _ rxObserveIntersectionDebounce: number - debounce time in ms

  • rxObserveIntersectionRootMargin: root margin in px, see MDN
  • rxObserveIntersectionThreshold: threshold, see MDN
  • rxObserveIntersectionRoot: root element, see MDN
  • rxObserveIntersectionScheduler: RxJs Scheduler to use for debouncing

Outputs

  • intersect: IntersectionObserverEntry[] - emits when the observed element intersects with the root element

rxObserveVisibility

This directive wraps the IntersectionObserver API and is an alternative for rxObserveIntersection.

Usage example:

<div rxObserveVisibility (intersectStatusChange)="onVisible($event)"></div>

Inputs _ rxObserveVisibilityDebounce: number - debounce time in ms

  • rxObserveVisibilityRootMargin: root margin in px, see MDN
  • rxObserveVisibilityThreshold: threshold, see MDN
  • rxObserveVisibilityRoot: root element, see MDN
  • rxObserveVisibilityScheduler: RxJs Scheduler to use for debouncing

Outputs

  • intersectStatusChange: IntersectionStatus - emits when the observed element intersects with the root element
type IntersectionStatus = 'Visible' | 'Hidden';

rxRenderInViewport

This directives leverages the IntersectionObserver API and renders the content only when the observed element is in the viewport.

Usage example:

<div *rxRenderInViewport="'0px'"></div>

Inputs

  • rxRenderInViewport: default input - corresponds to the rootMargin input of the IntersectionObserver API
  • debounce: number - debounce time in ms to debounce the intersection status
  • scheduler: RxJs Scheduler to use for debouncing
  • root: root element, see MDN
  • threshold: threshold, see MDN