angular-simple-scroll-spy

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:

scrollSpyMenu
scrollSpyMenu	Target content element id.
ssmActiveClassName	Class attribute value when active. default:'active'
ssmCurrentContent	Send current selected element id.
ssmScrollBehavior	Element.scrollIntoView options. default:'smooth'
ssmScrollBlock	Element.ScrollIntoView options. default:'start'
ssmScrollInline	Element.ScrollIntoView options. default:'nearest'

scrollSpyContent
scrollSpyContent	Target element tag name.
sscCurrentContent	Send current selected element id.
sscCurrentContentChange	Output bind of 'sscCurrentContent'.
sscDirection	Scroll direction, 'row'

Demo

npm run start

or

demo on sandbox