projects/ngx-observers/src/lib/intersection.directive.ts
IntersectionDirective
Allow observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport
Example:
<div (obsIntersection)="intersect($event)" [obsOptions]="{threshold: 0.5}" #elem="directive">...</div>
| Selector | [obsIntersection] |
Properties |
Inputs |
Outputs |
| obsOptions |
Type : IntersectionObserverInit
|
Default value : {}
|
|
Observer options input You can pass original observer options via [obsOptions] input, to configure observer behaviour. Detailed information can be found: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver |
| obsIntersection |
Type : EventEmitter
|
|
obsIntersection output Emits array of IntersectionObserverEntry objects, each representing one threshold which was crossed, either becoming more or less visible than the percentage specified by that threshold. Detailed information can be found: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver |
| observer |
Type : IntersectionObserver | undefined
|
|
Original observer object You can access observer within your controller using @ViewChild Example: Detailed information can be found: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver |