intersection-observer.service.ts

import { Injectable } from '@angular/core';
import 'intersection-observer';

declare global {
  interface Window {
    IntersectionObserver: IntersectionObserver;
  }
}

const defaults = {
  root: null,
  rootMargin: '0px 0px 0px 0px',
  threshold: [0, 0.25, 0.5, 0.75, 1],
};

@Injectable()
export class IntersectionObserverService {
  observer: IntersectionObserver;

  constructor(
    callback: IntersectionObserverCallback,
    options: IntersectionObserverInit = defaults
  ) {
    if (window.IntersectionObserver) {
      this.observer = new IntersectionObserver(callback, options);
    }
  }
}