Neatly Punctuated Musings

    @studiohyperdrive/ngx-utils
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    Angular Tools: Utils (@studiohyperdrive/ngx-utils)

    Install the package first:

    npm install @studiohyperdrive/ngx-utils

    1. Window service

    This service uses the DOCUMENT injection-token to provide several methods to access both document and window and related information. It is convenient for using the document or window without breaking SSR.

    Properties

    width$

    The window-service exposes a width$ observable to get the window-width. It defaults to 1200 when no window is defined.

    import { WindowService } from '@studiohyperdrive/ngx-utils';
    
    export class YourComponent {
    	public windowWidth$: Observable<number>;
    
    	constructor(
    		private windowService: WindowService
    	) {
    		this.windowWidth$ = this.windowService.width$;
    	}
    }

    scrollingUp$

    The window-service exposes a scrollingUp$ observable to know when the scroll has ended.

    import { WindowService } from '@studiohyperdrive/ngx-utils';
    
    export class YourComponent {
    	public scrollingUp$: Observable<number>;
    
    	constructor(
    		private windowService: WindowService
    	) {
    		this.scrollingUp$ = this.windowService.scrollingUp$;
    	}
    }

    currentScrollPosition

    The window-service exposes a currentScrollPosition property that contains the currentScrollPosition after handleContentScroll has been called.

    import { WindowService } from '@studiohyperdrive/ngx-utils';
    
    export class YourComponent {
    	public currentScrollPosition: Observable<number>;
    
    	constructor(
    		private windowService: WindowService
    	) {
    		this.currentScrollPosition = this.windowService.currentScrollPosition;
    	}
    }

    window

    The window-service exposes the window property which is a link to the Window object.

    import { WindowService } from '@studiohyperdrive/ngx-utils';
    
    export class YourComponent {
    	public window: Observable<number>;
    
    	constructor(
    		private windowService: WindowService
    	) {
    		this.window = this.windowService.window;
    	}
    }

    document

    The window-service also exposes the document property which is a link to the Document object.

    import { WindowService } from '@studiohyperdrive/ngx-utils';
    
    export class YourComponent {
    	public window: Observable<number>;
    
    	constructor(
    		private windowService: WindowService
    	) {
    		this.window = this.windowService.window;
    	}
    }

    Methods

    scrollTo

    A scrollTo method is provided to scroll to a position on the page. When there is no window, it will do nothing.

    The offset is set to 0 by default so triggering the method without a value will scroll to the top of the page.

    import { WindowService } from '@studiohyperdrive/ngx-utils';
    
    export class YourComponent {
    	constructor(
    		private windowService: WindowService
    	) {}
    
    	public somethingHappened(): void {
    		this.windowService.scrollTo(500);
    	}
    }

    hasDocument

    The hasDocument-method is provided to check if there is a document.

    import { WindowService } from '@studiohyperdrive/ngx-utils';
    
    export class YourComponent {
    	constructor(
    		private windowService: WindowService
    	) {}
    	
    	public aCoolMethod(): void {
    		if (this.windowService.hasDocument()) {
    		    // do something that depends on the document.
    		}
    	}
    }

    isBrowser

    The isBrowser-method is provided to check if the current platform is a browser.

    It uses the isPlatformBrowser method with the PLATFORM_ID injection-token internally.

    import { WindowService } from '@studiohyperdrive/ngx-utils';
    
    export class YourComponent {
    	constructor(
    		private windowService: WindowService
    	) {}
    	
    	public aCoolMethod(): void {
    		if (this.windowService.isBrowser()) {
    		    // do something that depends on the browser.
    		}
    	}
    }

    2. subscription service

    This service is a solution to end RxJS subscriptions when component is destroyed.

    It is build on the assumption that a service provided on a component destroys when the component destroys.

    To use it, you provide the service on the component and provide its exposed destroyed$ observable within the takeUntil operator in a pipe on your subscription.

    import { takeUntil} from 'rxjs/operators';
    import { SubscriptionService } from '@studiohyperdrive/ngx-utils';
    
    @Component({
    	providers: [ SubscriptionService ],
    })
    export class YourComponent {
    		constructor( 
    			private subs: SubscriptionService
    		) {
    			yourObservable
    				.pipe(
    					takeUntil(this.subs.destroyed$),
    				).subscribe(
    					// your subscriptions
    				)
    		}
    	}

    build information

    This project has been build with:

    • Angular CLI : 11.2.1
    • Angular: 11.2.1
    • nodejs: 12.19.0
    • npm: 6.14.8

    For a complete list of packages and version check out the package.json file.

    Keywords

    none

    Install

    npm i @studiohyperdrive/ngx-utils

    DownloadsWeekly Downloads

    22

    Version

    2.0.0

    License

    none

    Unpacked Size

    61.1 kB

    Total Files

    24

    Last publish

    Collaborators

    • spammelies
    • shd-developer
    • bavo-vanderghote-shd
    • ian-emsens-shd
    • jeroenvalcke
    • tom-odb
    • brilniels
    • thomasbormans
    • sanderh
    • laurenspeeters
    • ex03495
    • rednas
    • denisvalcke
    • ibenvandeveire