Angular Utility Library | ng-hub-ui-utils
Angular utility library with pipes, focus management, overlays, transitions and translation helpers shared across reusable UI components.
Overview
Why teams search for this library
Use this Angular utility library to avoid rewriting the low-level pieces behind overlays, focus traps, translation helpers and common template utilities.
Install
npm install ng-hub-ui-utilsJump to
Ideal for
- shared UI infrastructure
- overlay systems
- focus management
- template helpers
About utils
ng-hub-ui-utils is the shared foundation behind many reusable UI patterns. It is useful when Angular teams want to centralize the lower-level pieces that keep overlay systems, focus management, pipes and translation helpers consistent across projects.
Feature guides
Focus Management
Trap and manage keyboard focus within elements
Examples:
Focus Trap
Keep focus contained within a modal or dialog using hubFocusTrap()
Live preview is not available for this example yet.
Code
Focusable Elements
Query boundary focusable elements with getFocusableBoundaryElements()
Live preview is not available for this example yet.
Code
Internationalization (i18n)
Translation services and pipes for multi-language support
Examples:
Translation Service
HubTranslationService for managing translations
Live preview is not available for this example yet.
Code
Translate Pipe
TranslatePipe for template-based translations
Live preview is not available for this example yet.
Code
Translation Provider
provideHubTranslations() for app configuration
Live preview is not available for this example yet.
Code
Overlay System
Create positioned overlays and floating elements
Examples:
Overlay Service
HubOverlayService for programmatic overlay creation
Live preview is not available for this example yet.
Code
Overlay Reference
OverlayRef for managing overlay lifecycle
Live preview is not available for this example yet.
Code
Positioning
ConnectionPositionPair for flexible positioning
Live preview is not available for this example yet.
Code
Popup Service
Simplified popup management
Examples:
Popup Creation
HubPopupService for quick popup creation
Live preview is not available for this example yet.
Code
Pipes
Utility pipes for templates
Examples:
Type Checking Pipes
IsStringPipe, IsObjectPipe, IsObservablePipe
Live preview is not available for this example yet.
Code
GetPipe
Access nested object properties with dot notation
Live preview is not available for this example yet.
Code
UcfirstPipe
Capitalize the first letter of a string
Live preview is not available for this example yet.
Code
UnwrapAsyncPipe
Unwrap observables and promises in templates
Live preview is not available for this example yet.
Code
Utility Functions
General-purpose helper functions
Examples:
Type Guards
isString(), isNumber(), isDefined(), isPromise()
Live preview is not available for this example yet.
Code
String Utilities
removeAccents(), interpolateString(), regExpEscape()
Live preview is not available for this example yet.
Code
Object Utilities
equals() for deep comparison, getValue() for dot notation
Live preview is not available for this example yet.
Code
DOM Utilities
closest(), reflow(), getActiveElement()
Live preview is not available for this example yet.
Code
RxJS Utilities
runInZone() operator for NgZone integration
Live preview is not available for this example yet.
Code
Scrollbar Utilities
Measure and compensate for scrollbar width
Examples:
Scrollbar Width
scrollbarWidth() and scrollbarPadding() functions
Live preview is not available for this example yet.
Code
Transitions
CSS transition helpers
Examples:
Run Transition
hubRunTransition() for programmatic CSS transitions
Live preview is not available for this example yet.
Code
Key features
Overlay and popup primitives
Provides the lower-level building blocks needed by floating UI and detached rendering patterns.
Focus management utilities
Handle focus traps and keyboard-safe interaction patterns in dialogs and overlays.
Pipes and translation helpers
Centralize template helpers, formatting and lightweight translation utilities used by Angular components.
Recent changes
No changelog entries available.