ngx-intersect

NgxIntersect

Angular wrapper of IntersectionObservable API.

Installation

Using npm:

npm i ngx-intersect

Usage

Import NgxIntersectModule into your module.

Use ngxIntersect directive to get enter/exit viewport events.

  <div class="box" 
         ngxIntersect
         (intersectionChanged)="updateThreshold($event, 'box1')"
         (withinViewChanged)="log($event, 'box1')">
         ... My Content
  </div>

Use @Input() threshold and @Input() rootMargin to configure intersection thresholds.

Use ngxIntersectAnchor to anchor ancestor element as viewport.

  <div class="container" ngxIntersectAnchor>
    <div class="box" 
           ngxIntersect
           (intersectionChanged)="updateThreshold($event, 'box1')"
           (withinViewChanged)="log($event, 'box1')">
           ... My Content
    </div>
  </div> 

TODO:

• demo site
• jest (ngrx store example)
• circle
• changelog https://github.com/conventional-changelog/conventional-changelog