npm install angular2-viewport --save

import { ViewportModule } from 'angular2-viewport';

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

Emits an event when element is in viewport

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

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

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

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

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>

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');
			});
	}

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

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

import { TriggerService } from 'angular2-viewport';

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

	constructor(triggerService: TriggerService) {
			...
	}

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