kit-intersection

README

IntersectionObserver module.

Module uses Intersection Observer API, more info: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverAPI

API

[class] KitIntersectionModule

@NgModule

Exports:[ KitIntersectionDirective, ]

[class] KitIntersectionService

@Injectable

Observe viewport intersection.

Should be provided on a component or a directive.

Usage

Provide KitIntersectionService on a component or a directive, that you want to observe.

\@Component({
  ...
  providers: [
    KitIntersectionService,
  ],
})
export class TestComponent {
  constructor(private intersection: KitIntersectionService) {
  }
  ...
  // Check
  const visible = this.instersection.isIntersecting;
  ...
  // Observe
  this.instersection.observe().subscribe(isIntersecting => {
  });
}

Members

SignatureDescription
get isIntersecting()
observe(): Observable<boolean | null>

[class] KitIntersectionDirective

@Directive

Selector:'[kitIntersection]'

Observe viewport intersection.

Usage

And listen to intersection changes:

<div (kitIntersection)="visible = $event">
</div>

Members

SignatureDescription
@Output() kitIntersection = new EventEmitter<boolean>()