0.0.3 • Published 6 years ago

angular-simple-scroll-spy v0.0.3

Weekly downloads
135
License
MIT
Repository
github
Last release
6 years ago

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
scrollSpyMenuTarget content element id.
ssmActiveClassNameClass attribute value when active. default:'active'
ssmCurrentContentSend current selected element id.
ssmScrollBehaviorElement.scrollIntoView options. default:'smooth'
ssmScrollBlockElement.ScrollIntoView options. default:'start'
ssmScrollInlineElement.ScrollIntoView options. default:'nearest'
scrollSpyContent
scrollSpyContentTarget element tag name.
sscCurrentContentSend current selected element id.
sscCurrentContentChangeOutput bind of 'sscCurrentContent'.
sscDirectionScroll direction, 'row''column'. default:'row'

Demo

npm run start

or

demo on sandbox