Angular In Port / Angular In View Port
Notes on this fork
This package is a temporary fork of angular-inport
until the maintainer merges the PR for Angular 9 compatibility.
Installation
-
npm i -S @stockopedia/angular-inport
-
yarn add @stockopedia/angular-inport
Importing module
import { NgInviewModule } from '@stockopedia/angular-inport';
@NgModule({
imports: [
// ...
NgInviewModule
],
declarations: [YourAppComponent],
exports: [YourAppComponent],
bootstrap: [YourAppComponent],
})
Basic Usages
<div in-view (inview)="inview($event)"></div>
Advanced Usages
<div in-view
(inview)="inview($event)"
[offset]="[top, right, bottom, left]" or "[top/bottom, left/right]" or "[top/bottom/left/right]"
[viewPortOffset]="[top, right, bottom, left]" or "[top/bottom, left/right]" or "[top/bottom/left/right]"
[throttle]="[Number in ms to limit the inview event]"
[scrollELement]="parent element reference on which scrolling applied"
[trigger]="An Observable ex. BehaviorSubject"
>
.......
</div>
InviewContainer and InviewItem Directive
Basic Usages
<div in-view-container (inview)="inview($event)">
<div in-view-item *ngFor="let item of items; let i = index;" [id]="index" [data]="item">
.......
</div>
</div>
Advanced Usages
<div in-view-container
(inview)="inview($event)"
[offset]="[top, right, bottom, left]" or "[top/bottom, left/right]" or "[top/bottom/left/right]"
[viewPortOffset]="[top, right, bottom, left]" or "[top/bottom, left/right]" or "[top/bottom/left/right]"
[throttle]="[Number in ms to limit the inview event]"
[bestMatch]="when true, inview will return only one element closet to viewport center"
[trigger]="An Observable ex. BehaviorSubject"
>
<div in-view-item *ngFor="let item of items; let i = index;" [id]="index" [data]="item">
.......
</div>
</div>
InView Props
-
(inview)
: inview event, it will keep to emitting the event on scroll. -
[offset]
: offset value can be provided as [top, right, bottom, left] or [top/bottom, left/right] or [top/bottom/left/right] -
[viewPortOffset]
: offset value from an element or window port. -
[trigger]
: An Observable ex. BehaviorSubject can be passed to trigger (inview) event. -
[scrollELement]
: element to check if the content is available in view port with in the element 's view port. default value is window. -
[data]
: data property can be used to identify the in-view event source, when you have multiple in-view directives in a page attached to same in-view handler. -
[lazy]
: default false, set true when you want in-view event to trigger only on visibility of that content. will not trigger when content goes out of view port. -
[tooLazy]
: default false, set true when you want in-view event to trigger only when visibility state changes. -
[triggerOnInit]
: default false, set true when you want in-view event to get triggered on element load otherwise it will trigger only on scroll event.
InViewContainer Props
-
(inview)
: inview event, it will keep to emitting the event on scroll. -
[offset]
: offset value can be provided as [top, right, bottom, left] or [top/bottom, left/right] or [top/bottom/left/right] -
[viewPortOffset]
: offset value from an element or window port. -
[scrollWindow]
: default true uses window scroll to check inview status, set false to check from container's scroll. -
[bestMatch]
: will return only the centered element from other element. Please check example. -
[triggerOnInit]
: default false, set true when you want in-view event to get triggered on element load otherwise it will trigger only on scroll event.