Angular 2+ Simple Scroll Spy Directive

This is craeted by ng-packagr on Angular6.

Installation

npm install angular-simple-scroll-spy --save

Usage

In Module:

App Module

import {SimpleScrollSpyModule} from "angular-simple-scroll-spy";

@NgModule({
    imports: [SimpleScrollSpyModule]
})

or

Shared Module

import {SimpleScrollSpyModule} from "angular-simple-scroll-spy";

@NgModule({
    imports: [SimpleScrollSpyModule],
    exports: [SimpleScrollSpyModule]

})

In Component:

Menu Template

<ul>
  <li scrollSpyMenu="menu1" [currentContent]="currentMenuId">Menu 1</li>
  <li scrollSpyMenu="menu2" [currentContent]="currentMenuId">Menu 2</li>
  <li scrollSpyMenu="menu3" [currentContent]="currentMenuId">Menu 3</li>
</ul>

Content Template

<div scrollSpyContent="DIV" [(currentContent)]="currentMenuId">
  <div id="menu1">content1</div>
  <div id="menu2">content2</div>
  <div id="menu3">content3</div>
</div>

Component Class

currentMenuId = "menu1";

Properties:

Demo

npm run start

or

demo on sandbox