Skip to content

Latest commit

 

History

History
102 lines (75 loc) · 3.75 KB

README.md

File metadata and controls

102 lines (75 loc) · 3.75 KB

Angular In Port / Angular In View Port

Installation

  • npm i -S angular-inport

  • yarn add angular-inport

Importing module

import { NgInviewModule } from '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.