@eutrepe/is-in-viewport v8.1.0

NgxEutrepeIsInViewport

• Directive for Angular 8 based on Intersection observe to detect element in viewport.

Installation

npm i --save @eutrepe/is-in-viewport@8

You also need polyfill

npm i --save intersection-observer

and add this in your src/polyfills.ts file

import 'intersection-observer';

Usage

1) Register the NgxEutrepeIsInViewportModule in your app module.

import { NgxEutrepeIsInViewportModule } from '@eutrepe/is-in-viewport'

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

import { NgxEutrepeIsInViewportModule } from '@eutrepe/is-in-viewport';
import { WINDOW_IN_VIEWPORT } from '@eutrepe/is-in-viewport';

@NgModule({
    declarations: [
      AppComponent
    ],
    imports:      [
        BrowserModule,
        BrowserAnimationsModule,
        NgxEutrepeIsInViewportModule
    ],
     providers: [
      {provide: WINDOW_IN_VIEWPORT, useValue: window},
    ],
    bootstrap: [ AppComponent ],
    exports: []
})
export class AppModule { }

2) Use the directive (ngxEutrepeIsInViewport)

If element is visible in viewport the directive add in-viewport class to the element or custom class

Basic

<section class="section1" ngxEutrepeIsInViewport>
 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum, facere.</p>
</section>

Advanced

<section class="section1"
   [ngxEutrepeIsInViewport]="{threshold: [0, 0.5, 1]}"
   [eutrepeOnActiveCallback]="onActive.bind(this)"
   [eutrepeOnUnactiveCallback]="onUnactive.bind(this)"
   [eutrepeOnActiveCallbackParams]="['some_text', 1, true]"
   [eutrepeOnUnactiveCallbackParams]="[100, false]"
   [eutrepeInvokeOnce]="false"
   [eutrepeActiveClass]="'my-class'"
   (eutrepeViewportChange)="onChanage($event)"
   >
 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum, facere.</p>
</section>

<!-- Use .bind(this) for callbacks if you want use scoped variables -->

API

Directive:

*Intersection Observe: developer.mozilla.org

Intersection Observe default config:

const defaultConfig: IIntersectionConfig = {
    root      : null,
    rootMargin: '0px 0px -30%',
    threshold : [0]
  }

Interfaces

eutrepeViewportChange event:

export interface IIntersectionConfig  {
  root?: HTMLElement;
  rootMargin?: string;
  threshold?: Array<number>
}

ngxEutrepeIsInViewport config:

export interface IViewportEvent  {
  el: HTMLElement;
  status: boolean;
}