# ng-intersection

> Angular library that wraps the browser IntersectionObserver in an Angular directive

Latest version **1.0.1** (published 2019-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-intersection
pnpm add ng-intersection
yarn add ng-intersection
bun add ng-intersection
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-11-02 |
| First published | 2019-11-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 95.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | lilbaek |
| Keywords | angular, intersection, IntersectionObserver, viewport, getBoundClientRect, infinite, scrolling |

## Links

- npm: https://www.npmjs.com/package/ng-intersection
- Repository: https://github.com/lilbaek/angular-intersection
- Homepage: https://github.com/lilbaek/angular-intersection#readme
- Issues: https://github.com/lilbaek/angular-intersection/issues
- npm.io page: https://npm.io/package/ng-intersection

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 1.0.1 (latest) — 2019-11-02
- 1.0.0 — 2019-11-02
- 0.0.5 — 2019-11-01

## README

# Ng Intersection
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

---
_Source: https://npm.io/package/ng-intersection · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._