ngx-scrollspys v1.0.4

ngx-scrollspys

This is an extension for Angular 2+ applications, for smooth scroll-spy experience

Installation

Install this extension from npm repository using

  - npm i ngx-scrollspys --save

Setting Up

Setup in your angular project by importing, NeatScrollspyModule into your app.module.ts

      import { NeatScrollspyModule } from 'ngx-scrollspys'; 

      ...... 

      @NgModule({
        declarations: [ ... ],
        imports: [
          ....
          NeatScrollspyModule,
        ]
      })

Getting Started

NeatScrollspy can be used real quick and easy, with just two basics.

1. Set the point in your HTML you want to monitor scroll

   <div [neatScrollSpy]="{ id: 'uniqueID', selector: 'mains'}">
         // Place code you want to spy on scroll here with assigned selector as class
         // Example <h2 class="mains"></h2>
   </div>
         

2. Set where to display scroll options and responses

   <neat-scrollspy-template [neatScrollspyOptions]="{ id: 'uniqueID' }"></neat-scrollspy-template>

neatScrollSpy (directive)

This is the marker used to tell the extension to listen for elements within its span. The available options for this directive are as follows:

neat-scrollspy-template (template)

This is the template for neat-scrollspy, which display the scroll options. Available directives within this template are:

highlightOptions (directive)

This option is used for editing the highlighting style of the neatScrollSpy extension. Example of usage:

    <neat-scrollspy-template [highlightOptions]="{ type: 'bold' }" [neatScrollspyOptions]="{ id: 'uniqueID' }"></neat-scrollspy-template>

selectionOrder (directive)

This option is used for editing the number of items highlighted on a page. Example of usage:

    <neat-scrollspy-template [selectionOrder]="{ type: 'first' }" [neatScrollspyOptions]="{ id: 'uniqueID' }"></neat-scrollspy-template>

alignOption (directive)

This option is used for editing the alignment structure on the page. Example of usage:

    <neat-scrollspy-template [alignOption]="{ type: 'straight' }" [neatScrollspyOptions]="{ id: 'uniqueID' }"></neat-scrollspy-template>

TODO

• Unit Test
• Publish Example Page