@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>

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.

Service

Alternatively you can use Observable-based IntersectionObserverService and provide tokens INTERSECTION_ROOT_MARGIN and INTERSECTION_THRESHOLD manually:

@Component({
    selector: 'my-component',
    providers: [
        IntersectionObserverService,
        {
            provide: INTERSECTION_THRESHOLD,
            useValue: 0.5,
        },
    ],
})
export class MyComponent {
    constructor(
        @Inject(IntersectionObserverService) entries$: IntersectionObserverService,
    ) {
        entries$.subscribe(entries => {
            // This will trigger once my-component becomes half way visible
            // in parent element designated with waIntersectionRoot directive
            // Don't forget to unsubscribe
            console.log(entries);
        });
    }
}

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.