@angular-primitives/intersection-observer v0.0.6

@angular-primitives/intersection-observer

A range of IntersectionObserver API utilities great for different types of use cases:

• fromVisibilityObserver - A reactive primitive visibility observer .
• fromViewportObserver - A reactive primitive viewport observer.

Installation

npm install @angular-primitives/date
# or
pnpm add @angular-primitives/date
# or
yarn add @angular-primitives/date

fromVisibilityObserver(example)

• Screen Observer

import { fromVisibilityObserver } from "@angular-primitives/intersection-observer";

@Component(
  ...
    template: `
        <div #someRef></div>
        <span>visible: {{isSomeRefVisible()}}</span>
    `
)
export class SomeComponent implements AfterViewInit {
  @ViewChild('someRef') someRef!: ElementRef;
  isSomeRefVisible!: Signal<boolean>;

  ngAfterViewInit() {
    this.isSomeRefVisible = fromVisibilityObserver(this.someRef?.nativeElement);
  }
}

• Contextual Observer

import { fromVisibilityObserver } from "@angular-primitives/intersection-observer";

@Component(
  ...
    template: `
        <div #contextualRef>
            <div #someRef></div>
        </div>
        <span>visible: {{isSomeRefVisible()}}</span>
    `
)
export class SomeComponent implements AfterViewInit {
  @ViewChild('contextualRef') contextualRef!: ElementRef;
  @ViewChild('someRef') someRef!: ElementRef;
  isSomeRefVisible!: Signal<boolean>;

  ngAfterViewInit() {
    const config =  { root: this.contextualRef.nativeElement, rootMargin: '0px', threshold: 0 } 
    this.isSomeRefVisible = fromVisibilityObserver(this.someRef?.nativeElement, config);
  }
}

fromViewportObserver(example)

• Viewport Observer using ViewChildren(virtual scroller)

import { fromViewportObserver } from "@angular-primitives/intersection-observer";

@Component(
  ...
    template: `
        <div #itemsViewport *ngFor="let item of arrayList; let index = index">
            <div class="item-viewport" *ngIf="signalViewport()[index]">
              {{ item }}
            </div>
        </div>
    `
)
export class SomeComponent implements AfterViewInit {
  @ViewChildren('itemsViewport') itemsViewport!: any;
  signalViewport: WritableSignal<{ [n: number]: boolean }> = signal({});

  ngAfterViewInit() {
    this.signalViewport = fromViewportObserver(this.itemsViewport._results)
  }
}

• Viewport Observer using ElementRef(virtual scroller)

import { fromViewportObserver } from "@angular-primitives/intersection-observer";

@Component(
  ...
    template: `
        <div viewportObserver (viewportSignal)="signalViewportDirective = $event" class="contextual-container">
          <div *ngFor="let item of arrayList; let index = index">
            <div class="item-viewport" *ngIf="signalViewportDirective()[index]">
              {{ item }}
            </div>
          </div>
        </div>
    `
)
export class SomeComponent {
  arrayList: number[] = [...Array(100).keys()];
  signalViewportDirective: WritableSignal<{ [n: number]: boolean }> = signal({});
}

directive used viewportObserver

Obs: If your list can change you can use third parameter passing the items(signal or observable) and a token injetor to use effect hook