Angular InViewport

A simple lightweight library for Angular (2+) with no external dependencies that detects when an element is within the browser viewport and adds a in-viewport or not-in-viewport class to the element.

This is a simple library for Angular, implemented in the Angular Package Format v4.0.

Install

npm i angular-inviewport --save

app.module.ts

import { InViewportModule } from 'angular-inviewport';

@NgModule({
  imports: [
    /** other imports **/
    InViewportModule,
    /** other imports **/
  ],
  /** other ngModule code **/
})
export class AppModule { }

Example

Just using classes

<p class="foo" inViewport>Amet tempor excepteur occaecat nulla.</p>

.foo {
  transition: transform .35s ease-out;
}

.foo.not-in-viewport {
  transform: translateY(-30px);
}

.foo.in-viewport {
  transform: translateY(0);
}

Using events

<p class="foo" inViewport (onInViewportChange)="onInViewportChange($event)">
  Amet tempor excepteur occaecat nulla.
</p>

export class AppComponent {
  highlight = false;

  onInViewportChange(inViewport: boolean) {
    this.highlight = inViewport;
  }
}

.highlight {
  background-color: yellow;
}

Specify debounce time (default: 100ms)

<p class="foo" inViewport [debounce]="500">
  Amet tempor excepteur occaecat nulla.
</p>