Angular Utility Library | ng-hub-ui-utils

Angular utility library with pipes, focus management, overlays, transitions and translation helpers shared across reusable UI components.

API reference

Inputs

HubTranslationService

Type: Service

Default: -

Injectable service for managing translations. Methods: getTranslation(), setTranslations()

HubOverlayService

Type: Service

Default: -

Service for creating and managing overlays programmatically

HubPopupService

Type: Service

Default: -

Simplified service for creating popup elements

Outputs

TranslatePipe

Type: Pipe

Translates a key using HubTranslationService. Usage: {{ "key" | translate }}

GetPipe

Type: Pipe

Gets nested property value. Usage: {{ object | get:"path.to.property" }}

IsStringPipe

Type: Pipe

Checks if value is a string. Usage: {{ value | isString }}

IsObjectPipe

Type: Pipe

Checks if value is an object. Usage: {{ value | isObject }}

IsObservablePipe

Type: Pipe

Checks if value is an Observable. Usage: {{ value | isObservable }}

UcfirstPipe

Type: Pipe

Capitalizes first letter. Usage: {{ "hello" | ucfirst }} → "Hello"

UnwrapAsyncPipe

Type: Pipe

Unwraps Observable or Promise values in templates

Templates

hubFocusTrap()

Traps keyboard focus within an element. Useful for modals and dialogs.

Example:

interpolateString()

Replaces {{ placeholders }} with values from an object

Example:

getValue()

Gets nested property using dot notation

Example:

equals()

Deep equality comparison for objects and arrays

Example:

CSS variables

No CSS variables documented yet.

Styling and theming

No styling examples are documented yet. This section will include customization recipes and theming examples.