angular 4+ custom anchor components. DEMO

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

npm install ngx-anchor --save

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

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

• 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

custom anchor mark

• ngxAnchor(string): anchor custom id

example:

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

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>

build-in anchor navigator

• anchorTpl(TemplateRef)

example:

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

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

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