lukas-shawford / angular-scrollspy

A simple lightweight library for Angular 2/4+ which automatically updates links to indicate the currently active section in the viewport

Angular ScrollSpy

A simple lightweight library for Angular (2/4+) which automatically updates links to indicate the currently active section in the viewport. Requires Angular Inviewport to be installed as well.

This is a simple library for Angular, implemented in the Angular Package Format v4.0.

Install

npm i @thisissoon/{angular-scrollspy, angular-inviewport} --save

app.module.ts

import { ScrollSpyModule, WindowRef } from '@thisissoon/angular-scrollspy';

// Provide window object for browser and a suitable replacement
// on other platforms
const getWindow = () => window;
const providers: Provider[] = [
  { provide: WindowRef, useFactory: (getWindow) },
];

@NgModule({
  imports: [
    ScrollSpyModule.forRoot(providers)
  ]
})
export class AppModule { }

Example

A working example can be forund in the src/demo folder.

app.component.html

<ul role="navigation" snScrollSpy id="foo">
  <li><a snScrollSpyItem for="foo" href="#section1">Section 1</a></li>
  <li><a snScrollSpyItem for="foo" href="#section2">Section 2</a></li>
  <li><a snScrollSpyItem for="foo" href="#section3">Section 3</a></li>
  <li><a snScrollSpyItem for="foo" href="#section4">Section 4</a></li>
</ul>

<sn-scroll-spy-section id="section1" for="foo">content goes here</sn-scroll-spy-section>
<sn-scroll-spy-section id="section2" for="foo">content goes here</sn-scroll-spy-section>
<sn-scroll-spy-section id="section3" for="foo">content goes here</sn-scroll-spy-section>
<sn-scroll-spy-section id="section4" for="foo">content goes here</sn-scroll-spy-section>

app.component.css

a {
  color: blue;
  transition: color .2s ease-in-out;
}

a.active {
  color: darkblue;
}