Modularization

[Nolanus]

Extract core "PageScrollService" and separate it from the "pageScroll" directive for e.g. buttons. This allows usage of the PageScrollService without requiring the "@angular/router" dependency, which is only present in the directive (would resolve #40,#65 and simplify #69,#87).

[Nolanus]

Version 6 splits up the library into two npm modules: ngx-page-scroll-core and ngx-page-scroll.

The NgxPageScrollCore module only contains the PageScrollService which handles the actual scroll animation by manipulating the scrollTop properties of the DOM objects.

The NgxPageScroll module requires the NgxPageScrollCore module as peer dependency. It provides the directive pageScroll for easy drop-in usage of scroll animations.

How to upgrade:

Step 1

Replace

"dependencies": {
   "ngx-page-scroll": "^5.0.0"
}

with

"dependencies": {
   "ngx-page-scroll-core": "^6.0.0",
   "ngx-page-scroll": "6.0.0"
}

and run npm install.

Step 2

Add the NgxPageScrollCoreModule to your app, next to the existing NgxPageScrollModule:

import { NgxPageScrollCoreModule } from 'ngx-page-scroll-core';
import { NgxPageScrollModule } from 'ngx-page-scroll';

@NgModule({
  imports: [
    NgxPageScrollCoreModule.forRoot({ /* custom settings here */ }),
    NgxPageScrollModule,
  ]

Optionally move global setting overrides (like the default duration) into forRoot() method call.

[AckerApple]

Just one note from my upgrade experience, I had to stop using PageScrollInstance

Before Upgrade

import { PageScrollInstance } from "ngx-page-scroll"

const pageScrollInstance = PageScrollInstance.simpleInstance(document, "#targetname");
this.PageScrollService.start(pageScrollInstance);

After Upgrade

import { PageScrollService } from "ngx-page-scroll-core"

constructor(public PageScrollService:PageScrollService){
  this.PageScrollService.scroll({document:document, scrollTarget:"#targetname"})
}

[Nolanus]

Try:

this.pageScrollService.scroll({
  document: this.document,
  scrollTarget: '#scrollTarget',
  scrollViews: [sideNavContent[0]] // Create JS array with the first match
});

The documentation has to be enhanced, until then please refer to the comments at the PageScrollOptions class

ngx-page-scroll/projects/ngx-page-scroll-core/src/lib/page-scroll-instance.ts

Lines 10 to 49 in 2e94ba0

	export interface PageScrollOptions extends PageScrollConfig {
	/**
	* The document object of the current app
	*/
	document: Document;
	/**
	* A specification of the DOM element to scroll to. Either a string referring to an
	* element using a valid css selector (`#target`, `.class`, `div.class`) or a HTMLElement
	* that is attached to the document's DOM tree.
	*/
	scrollTarget: PageScrollTarget;
	/**
	* Array of HTMLElements or the body object that should be manipulated while performing
	* the scroll animation.
	*/
	scrollViews?: PageScrollViews[];
	/**
	* Maximum speed to be used for the scroll animation. Only taken
	* into account of no duration is provided
	*/
	speed?: number;
	/**
	* A listener to be called whenever the scroll animation stops
	*/
	scrollFinishListener?: EventEmitter<boolean>;
	namespace?: string;
	verticalScrolling?: boolean;
	duration?: number;
	scrollOffset?: number;
	advancedInlineOffsetCalculation?: boolean;
	interruptEvents?: string[];
	interruptKeys?: string[];
	interruptible?: boolean;
	easingLogic?: EasingLogic;
	}