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.