Track Scroll for Angular2

Features

easy-to-use directive: tracks when element enters a certain point of the window just by adding trackScroll directive

directive customizable: adjust tracker position, and pixel offset

Quick Start

npm install ng2-track-scroll --save

Table of contents

Setup

First you need to install the npm module:

npm install ng2-track-scroll --save

Then add the Ng2TrackScrollModule to the imports array of your application module (or a shared module):

import { NgModule } from ' @angular/core ' ; import { BrowserModule } from ' @angular/platform-browser ' ; import { Ng2TrackScrollModule } from ' ng2-track-scroll ' ; import { AppComponent } from ' ./app.component ' ; @ NgModule ( ) export class AppModule { }

Usage

In your template you should add the trackScroll attribute to elements you want to enable tracking. As soon as the tracking point gets past an trackScrollEnter event will be triggered, and as soon as the height of the element gets past an trackScrollLeave event will be triggered.

@ Component ( { selector : ' main-element ' , template : ` ... <h1 trackScroll (trackScrollEnter)="enter()" (trackScrollLeave)="leave()">Component Title</h1> <!-- Further content here --> ... ` } ) export class MainElementComponent { enter ( ) { console . log ( ' Track scroll enter is working! ' ) ; } leave ( ) { console . log ( ' Track scroll leave is working too! ' ) ; } }

Configuration

In your template you could pass some configurations, adding [trackScrollConfig]="{ ... }" with any of the options to overwrite.

Option Type Default Description position string 'middle' Position of the tracking point.

Options: 'top', 'middle', 'bottom' offset number 0 (px) Amount of pixels to add to the tracking point offsetPosition string 'bottom' If you select position 'middle' and specify an offset amount, you could indicate if you want to add them on above or below the tracking point.

Options: 'top, 'bottom'

@ Component ( { selector : ' main-element ' , template : ` ... <h1 trackScroll [trackScrollConfig]="{ position: 'top', offset: 300 }" (trackScrollEnter)="enter()" (trackScrollLeave)="leave()">Component Title</h1> <!-- Further content here --> ... ` } ) export class MainElementComponent { enter ( ) { console . log ( ' Track scroll enter is working! ' ) ; } leave ( ) { console . log ( ' Track scroll leave is working too! ' ) ; } }

Demo

The demo subfolder contains a project created with angular-cli that has been adapted to showcase the functionality of ng2-track-scroll. To execute the code follow this steps:

// Go the the demo folder cd demo // Install dependencies npm install // Run the server ng serve

Then go to http://localhost:4200 to check the demo running.

Test across browsers

Implement a debug option

Add tests to the library and demo

Add new configurations

License

MIT