closca/angular2-viewport

Angular 2 Viewport Directives & Services

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