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

Install the package first:

npm install @studiohyperdrive/ngx-utils

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.

Services

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.

Full documentation.

2. subscription service

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

Full documentation.

Abstracts

1. 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.

build information

This project has been build with:

• Angular CLI : 16.1.4
• Angular: 16.1.5
• nodejs: 18.17.0
• npm: 9.6.7

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

Team

This bundle of tools has been created and is maintained by Studio Hyperdrive.

Contributors:

• Axelle Vanden Eynde
• Benoît Dossoine
• Denis Valcke
• Iben Van de Veire
• Jasper De Smet
• Pieterjan Van Saet
• Wouter Heirstrate