roypeled/ngx-in-view

Angular 2+ wrapper for https://github.com/camwiegert/in-view

ngx-in-view

Angular 2+ wrapper for in-view.js

https://ihym.github.io/ngx-in-view/

Installation

Install through npm:

npm install --save ngx-in-view

API

[inView]

Output

• enter: EventEmitter<any>: Emits whenever the element enters the viewport.
• exit: EventEmitter<any>: Emits whenever the element exits the viewport.
• enterOnce: EventEmitter<any>: Emits when the element enters the viewport for the first time.
• exitOnce: EventEmitter<any>: Emits when the element exits the viewport for the first time.

Note: For every output, if not bound, no handler will be registered for the respective events.

Export (inView)

• is(): Check if element is in the viewport.

Usage

Once installed you need to import our main module into your application module by calling InViewModule.forRoot(). You should end up with code similar to this:

import {AppComponent} from '...';
import {InViewModule} from 'ngx-in-view/ngx-in-view';

@NgModule({
  imports: [..., InViewModule.forRoot()],
  declarations: [AppComponent, ...],
  bootstrap: [AppComponent],
})
export class AppModule {}

Configuration

Optionally, you can pass an object to the forRoot method, to configure ngx-in-view during the initialization of the application, in order to provide your own default values. For example:

@NgModule({
  imports: [
    ...,
    InViewModule.forRoot({
      threshold: 1, // Override this specific property
      ...
    })
  ],
})
export class AppModule {}

Currently available options can be found here.

If you want to change some config properties during runtime, you can easily achieve it by utilizing the update method like this:

import {InViewConfig} from 'ngx-in-view/ngx-in-view';

export class AppComponent {

  constructor(private config: InViewConfig) {}

  changeConfig() {
    this.config.update({
      threshold: 0.5,
      ...,
    });
  }
}

Contribute

Build

npm run build

If you want to watch your source files for changes and build every time use:

npm start

Note: Generated output is placed into the node_modules/ngx-card folder.

Demo

The best way to see your changes in action, is to use our demo page locally. Run:

npm run demo

which will create a development server accessible through http:localhost:1111. In conjunction with npm start in another command tab you have a fully working environment!

All demo resources can be found in the /demo folder.

---

MIT @ Vasilis Diakomanolis