Angular2 Viewport Module
Usage:
npm install angular2-viewport --save
;
Directives
[vp-in-view]
In View Emits an event when element is in viewport
Usage:
Options:
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 |
[vp-scrollable-content]
(helper)
Scrollable Content Mark a scrollable element for triggering detection of 'in-view' directives and emitting scroll events of 'ScrollService'
Usage:
Dynamic Child:
If the scrolling target will be created dynamically, specify a selector for getting the target when view rendered
Services
ScrollService
Usage:
;
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:
;
Methods:
bind(obs: Observable<any>):Subscription Bind an observable to trigger manually the detection of in-view directives