README

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.

Usage no npm install needed!