Skip to content

haoliangwu/ngx-anchor

Repository files navigation

ngx-anchor

angular 4+ custom anchor components. DEMO

todos

  • custom anchor mark directive
  • build-in anchor navigator
  • mult anchor level support
  • custom animation options
  • ember layout support
  • public navigator service

installing and usage

npm install ngx-anchor --save

load module in app module (with or without global configuration)

// without configuration
imports: [
  ...
  NgxAnchorModule.forRoot(),
  ...
]

// with configuration
imports: [
  ...
  NgxAnchorModule.forRoot({
    duration: 1000,
    step: 10,
    sensitivity: 36
  }),
  ...
]

configuration

  • duration(number): scroll animation total duration distance
  • step(number): the step per requestAnimationFrame
  • sensitivity(number): the offset which affects anchor navigator auto-active when trigger scroll events, default is 12px
  • timeFunc: scroll animation time function used, signature is
funciton timeFunc(step: number, start: number, change: number, duration: number) => number

directives

ngxAnchor

custom anchor mark

  • ngxAnchor(string): anchor custom id

example:

<h1 [ngxAnchor]="foo">main title{{foo}}</h1>

ngxWithAnchor

parent anchor mark

  • ngxWithAnchor(string): parent anchor id

example:

<h1 [ngxAnchor]="foo" [header]="true">main title{{foo}}</h1>
<section [ngxWithAnchor]="foo">
  <h2 [ngxAnchor]="bar">sub main title{{bar}}</h2>
</section>

components

ngx-anchor-nav

build-in anchor navigator

  • anchorTpl(TemplateRef)

example:

<ngx-anchor-nav>
  <ng-template #anchorTpl let-index="id">
    <span>{{index}}</span>
  </ng-template>
</ngx-anchor-nav>

services

AnchorService

property

  • anchors( { [id: string]: anchor: Anchor} ): all regisitry custom anchor instance
  • activeAnchor(Anchor): current active anchor instance
  • scrollEvents(Observable): current active anchor Observable

method

anchorFactory(el: HTMLElement, constraint: AnchorRelConstriant): Anchor

anchor instance factory with el

get(id: string): Anchor

retrive anchor instance by id

register(el: HTMLElement, constraint: AnchorRelConstriant)

register el as anchor instance

scrollTo(anchor: Anchor | string, scrollOptions?: AnchorScrollConfig)

scroll to some anchor instance with custom animation options

attachListner(el: HTMLElement | Window = window): Observable<Anchor>

attach scroll listner to container element, default is window