@ng-web-apis/intersection-observer

Intersection Observer API for Angular

Part of Web APIs for Angular

This is a library for declarative use of Intersection Observer API with Angular.

Install

If you do not have @ng-web-apis/common:

npm i @ng-web-apis/common

Now install the package:

npm i @ng-web-apis/intersection-observer

Usage

1. Use waIntersectionRoot directive to designate root element for observer.
2. Use waIntersectionObserver directive to observe an element:

<section waIntersectionRoot>
    <h1 waIntersectionThreshold="0.5" (waIntersectionObserver)="onIntersection($event)">
        I'm being observed
    </h1>
</section>

Alternatively you can use waIntersectionRootSelector attribute to pass CSS selector to waIntersectionObserver directive to look for a root element.

Use waIntersectionThreshold and waIntersectionRootMargin attributes to configure IntersectionObserver options

NOTE: Keep in mind these are used one time in constructor so you cannot use binding, only strings. Pass coma separated numbers to set an array of thresholds.

Browser support

15+	55+	51+	12.2+

You can use polyfill to support older browsers

Demo

You can try online demo here

See also

Other Web APIs for Angular by @ng-web-apis

Open-source

Do you also want to open-source something, but hate the collateral work? Check out this Angular Open-source Library Starter we’ve created for our projects. It got you covered on continuous integration, pre-commit checks, linting, versioning + changelog, code coverage and all that jazz.

Changelog

v1.0.0

21 January 2020