aleesaan/ng-scrollspy

:shipit: Scrollspy for Angular :shipit:

Angular Scroll Spy

A lightweight Angular library to detect the active section.

See the demo here.

Features:

• Super smooth!
• Works for nested and dynamically generated elements
• Supports multiple spies
• No other dependencies

Installation

First install the library.

npm install @aleesaan/ng-scrollspy

Then import the NgScrollSpyModule in your module.

import { NgScrollSpyModule } from 'ng-scrollspy';

@NgModule({
  ...
  imports: [
    NgScrollSpyModule,
  ],
  ...
})
export class AppModule {}

Usage:

The NgScrollSpyModule comes with a directive and a service.
The scrollSpyElement directive has to be applied on the elements to be spied, together with a unique id:

<h2 scrollSpyElement id="firstSpiedElement">
  I am the first being spied!
</h2>

In your component, on AfterViewInit, you can subscribe to the ScrollSpyService for updates on the currently active section:

import { ScrollSpyService } from 'ng-scrollspy';

@Component()
export class AppComponent implements AfterViewInit {
  constructor(private scrollSpy: ScrollSpyService) {}

  public ngAfterViewInit(): void {
    this.subsribeScrollSpy();
  }

  private subsribeScrollSpy(): void {
    this.scrollSpy.getCurrentSection$()
      .subscribe((section: string): void => {
        console.log(`${section} is active!`);
      });
  }
}

Multiple spies:

You might need to have different spies at the same time, like in a page with multiple menus.
You can specify this as an input to the directive:

<h2 scrollSpyElement scrollSpyId="sub-menu" id="subMenuElement1">
  I am the first spied element of a sub menu!
</h2>

In the service, you can then subscribe to the spy you specified:

this.scrollSpy.getCurrentSection$('sub-menu')
  .subscribe((subSection: string): void => {
    console.log(`${subSection} is active!`);
  });

Just make sure to call your additional spies something other than default, which is used for the (you guessed it) default spy.