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> 

| Property | Type | Default | Description | |:-----------------------|---------|---------|---------------------------------------------------------| |margin | number | 0 | shortcut for 'marginHorizontal' & 'marginVertical' | |marginHorizontal | number | 0 | shortcut for 'marginLeft' & 'marginRight' | |marginVertical | number | 0 | shortcut for 'marginTop' & 'marginBottom' | |marginTop | number | 0 | Offset for calculation of top positon of the element | |marginBottom | number | 0 | Offset for calculation of bottom positon of the element | |marginLeft | number | 0 | Offset for calculation of left positon of the element | |marginRight | number | 0 | Offset for calculation of right positon of the element | |infinite | boolean | false | Emit event on every enter to the viewport or only once |

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<Event> Emits when the scrolling is started on bound targets

onScrollEnd: Observable<Event> Emits when the scrolling is finished on bound targets

onScroll: Observable<Event> 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<any>):Subscription Bind an observable to trigger manually the detection of in-view directives