angular2-viewport v1.3.0

Angular2 Viewport Module

Usage:

npm install angular2-viewport --save

import { ViewportModule } from 'angular2-viewport';

@NgModule({
	imports: [
		...
		ViewportModule
	], ...
})
export class AppModule {}

Directives

In View [vp-in-view]

Emits an event when element is in viewport

Usage:

<div (vp-in-view)="handlerFunction()"></div>

Options:

<div (vp-in-view)="handlerFunction()" [vp-in-view-config]="{infinite: true, margin: 300}"></div> 

Scrollable Content [vp-scrollable-content] (helper)

Mark a scrollable element for triggering detection of 'in-view' directives and emitting scroll events of 'ScrollService'

Usage:

<div vp-scrollable-content></div>

Dynamic Child:

If the scrolling target will be created dynamically, specify a selector for getting the target when view rendered

<ion-scroll vp-scrollable-content=".scroll-content"></ion-scroll>

Services

ScrollService

Usage:

import { ScrollService } from 'angular2-viewport';

@Component({
	selector: 'a-component'
})
export class AComponent {

	constructor(scrollService: ScrollService) {
			scrollService.onScrollEnd.subscribe(e => {
				console.log('Yayy! Scrolling is ended');
			});
	}

Properties:

onScrollStart: Observable\ Emits when the scrolling is started on bound targets

onScrollEnd: Observable\ Emits when the scrolling is finished on bound targets

onScroll: Observable\ Throttled Scroll Event of bound targets

Methods:

bind(target: EventTarget): Function Binds its listener to the event target to trigger checking position of in-view directive or for emiting its scroll events Returns the unbinding function

unbind(target: EventTarget):void Removes its listener from the target

TriggerService (helper)

Usage:

import { TriggerService } from 'angular2-viewport';

@Component({
	selector: 'a-component'
})
export class AComponent {

	constructor(triggerService: TriggerService) {
			...
	}

Methods:

bind(obs: Observable\):Subscription Bind an observable to trigger manually the detection of in-view directives