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

This library provides several independent utilities to facilitate common use-cases for users and developers.

Installation

Install the package first:

npm install @studiohyperdrive/ngx-utils

Versioning and build information

This package will follow a semver-like format, major.minor.patch, in which:

• major: Follows the Angular major version
• minor: Introduces new features and (potential) breaking changes
• patch: Introduces bugfixes and minor non-breaking changes

For more information about the build process, authors, contributions and issues, we refer to the ngx-tools repository.

Concept

The ngx-utils package seeks to provide easy to use and to customize solutions to common use-cases. Each of these solutions can be used independently and are meant to enhance both the developer and the user experience of the application.

This package comes with a wide array of pipes, directives, services, types and abstracts. New implementations are added on a regular basis.

Implementation

Directives

FocusClickDirective

The FocusClickDirective provides an a11y friendly click handler.

Full documentation.

Injects

getQueryParams

The getQueryParams helper will get query params from the ActivatedRoute and return them as an observable.

Full documentation.

Pipes

BtwPipe

The BtwPipe will format Belgian VAT numbers.

Full documentation.

EntriesPipe

The BtwPipe will transform an object in to an array of key/value arrays.

Full documentation.

HasObserversPipe

The HasObserversPipe will check if an Output property has observers.

Full documentation.

hasOwnProperty

The hasOwnProperty will check whether the specified property exists within the given object.

Full documentation.

HasValuesPipe

The HasValuesPipe will check if a provided object has values.

Full documentation.

HighlightPipe

The HighlightPipe will select a piece of text and wrap it in a new element.

Full documentation.

IbanPipe

The IbanPipe will format an IBAN number.

Full documentation.

IsNotEmptyPipe

The IsNotEmptyPipe will check if a given argument is an object or array and if it is empty.

Full documentation.

JoinPipe

The JoinPipe will join values in an array.

Full documentation.

LimitToPipe

The LimitToPipe will limit an array to x-amount of values.

Full documentation.

LogPipe

The LogPipe will print the provided value to the console, it will not render the value on the page itself.

Full documentation.

MergeArraysPipe

The MergeArraysPipe is a wrapper around the JS native Array.concat with some added safety.

Full documentation.

SafeHtmlPipe

The SafeHtmlPipe will sanitize a given value with the DomSanitizer.

Full documentation.

StripHtmlPipe

The StripHtmlPipe will strip HTML from a given value.

Full documentation.

ToArrayPipe

The ToArrayPipe will check if a value is defined and then wrap it in a new array before returning it.

Full documentation.

TransformPipe

The TransformPipe will transform a given value with the provided transform-function.

Full documentation.

TruncateTextPipe

The TruncateTextPipe will truncate a given text to a given number of characters and suffix it with an ellipsis.

Full documentation.

UniqByPipe

The UniqByPipe will execute the uniqBy function (Lodash) on a provided array.

Full documentation.

WithRouterLinksPipe

The withRouterLinks pipe will provide a way to transform a string that contains one or more parts that need a routerLink by taking advantage of Angular web components.

Full documentation.

NgxReplaceElementsPipe

The ngxReplaceElements pipe will provide a way to transform a string that contains one or more parts that need an Angular component by taking advantage of Angular web components.

Full documentation.

Services

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.

Full documentation.

subscription service

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

Full documentation.

NgxStorageService

This service provides a SSR proof Observable based approach to both the local- and the sessionStorage.

Full documentation.

NgxMediaQueryService

This service provides a SSR proof way to set and subscribe to the window's media query changes.

Full documentation.

NgxBroadcastChannelService

This service provides a SSR proof way to create channels for the BroadcastChannel API, post messages on those channels and subscribe to the events.

Full documentation.

Abstracts

NgxQueryParamFormSyncComponent

This abstract component provides a way to sync the queryParams with a reactive form. This is ideal to handle filtered views, as it automatically syncs selected filters with the url.

Full documentation.