JSPM

ng-intersection

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q26726F

Package Exports

  • ng-intersection

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng-intersection) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Ng Intersection

An Angular library that wraps the browser IntersectionObserver in an Angular directive. The library allows for getting a callback whenever the target element enters/exits the ancestor/viewport depending on the options. Allows for browser based in viewport detection instead of old style Element.getBoundClientRect().

Useful for many different scenarios such as:

  • Lazy-loading of images or other content as a page is scrolled.
  • Implementing "infinite scrolling" web sites.
  • Deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result.

The library has no external dependencies.

Installation

Install using npm or yarn.

npm i ng-intersection

Usage

Add the Angular directive to the element you want to get notified about.

<div libNgIntersection (intersectionChanged)="intersectionChanged($event)" [intersectionObserverInit]="options" [waitBeforeReportingIntersection]="700"></div>

intersectionChanged will be triggered when the element enters/exits the ancestor/viewport.

waitBeforeReportingIntersection is an optional parameter that allows for only getting visible events if the element remains in the viewport for x amount of time. Useful for only loading/rendering elements if the user waits x amount of ms before scrolling past it.

intersectionObserverInit allows for specifying what options should be used for the IntersectionObserver. If no options are specified it will use the viewport by default for intersection detection.

Targeting a specific element with IntersectionObserver options: const options = { root: xyzHtmlElement, rootMargin: '0px', threshold: 1.0 }

See: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver for docs on the options.

#Browser compatibility See: https://caniuse.com/#feat=intersectionobserver