Angular Utility-Bibliothek | ng-hub-ui-utils

Angular Utility-Bibliothek mit Pipes, Fokusmanagement, Overlays, Transitions und Übersetzungs-Helfern, die von wiederverwendbaren UI-Komponenten gemeinsam genutzt werden.

Zuletzt aktualisiert 26.08.2026

Übersicht

Warum Teams nach dieser Bibliothek suchen

Nutze diese Angular Utility-Bibliothek, um die Low-Level-Bausteine hinter Overlays, Fokus-Traps, Übersetzungs-Helfern und gängigen Template-Utilities nicht neu schreiben zu müssen.

Installieren

npm install ng-hub-ui-utils

Springen zu

Ideal für

  • gemeinsame UI-Infrastruktur
  • Overlay-Systeme
  • Fokusmanagement
  • Template-Helfer

Über utils

ng-hub-ui-utils ist die gemeinsame Grundlage hinter vielen wiederverwendbaren UI-Mustern. Es ist nützlich, wenn Angular-Teams die Low-Level-Bausteine zentralisieren wollen, die Overlay-Systeme, Fokusmanagement, Pipes und Übersetzungs-Helfer projektübergreifend konsistent halten.

Funktionsleitfäden

Focus Management

Tastaturfokus innerhalb von Elementen einfangen und verwalten

Beispiele:
Fokusfalle

Den Fokus mit hubFocusTrap() innerhalb eines Modals oder Dialogs halten.

Focus Trap Demo

Click "Enable Focus Trap" and try to Tab outside the blue box. Focus will stay trapped inside.

Focus Trap Area

Status: 🔓 Free

Focusable Elements

The selector FOCUSABLE_ELEMENTS_SELECTOR finds all focusable elements.

getFocusableBoundaryElements(container)→ [first, last] elements
Fokussierbare Elemente

Die fokussierbaren Randelemente mit getFocusableBoundaryElements() abfragen.

Focus Trap Demo

Click "Enable Focus Trap" and try to Tab outside the blue box. Focus will stay trapped inside.

Focus Trap Area

Status: 🔓 Free

Focusable Elements

The selector FOCUSABLE_ELEMENTS_SELECTOR finds all focusable elements.

getFocusableBoundaryElements(container)→ [first, last] elements

Internationalisierung (i18n)

Übersetzungsservices und -Pipes für mehrsprachige Unterstützung

Beispiele:
Übersetzungsservice

HubTranslationService zur Verwaltung von Übersetzungen

TranslatePipe - Basic usage

'welcome' | translate→ Welcome to ng-hub-ui

TranslatePipe - With parameters

'greeting' | translate:{ name: 'Carlos' }→ Hello, Carlos!

TranslatePipe - Nested keys

'buttons.save' | translate→ Save
'buttons.cancel' | translate→ Cancel

Programmatic access

translationService.getTranslation('buttons.delete')→ Delete
Translate-Pipe

TranslatePipe für template-basierte Übersetzungen

TranslatePipe - Basic usage

'welcome' | translate→ Welcome to ng-hub-ui

TranslatePipe - With parameters

'greeting' | translate:{ name: 'Carlos' }→ Hello, Carlos!

TranslatePipe - Nested keys

'buttons.save' | translate→ Save
'buttons.cancel' | translate→ Cancel

Programmatic access

translationService.getTranslation('buttons.delete')→ Delete
Übersetzungs-Provider

provideHubTranslations() für die App-Konfiguration

TranslatePipe - Basic usage

'welcome' | translate→ Welcome to ng-hub-ui

TranslatePipe - With parameters

'greeting' | translate:{ name: 'Carlos' }→ Hello, Carlos!

TranslatePipe - Nested keys

'buttons.save' | translate→ Save
'buttons.cancel' | translate→ Cancel

Programmatic access

translationService.getTranslation('buttons.delete')→ Delete
Externer i18n-Adapter

Konfigurieren Sie eine reaktive Übersetzungsbrücke in app.config.ts für alle Hub-UI-Bibliotheken.

Konfigurieren Sie eine reaktive Übersetzungsbrücke in app.config.ts für alle Hub-UI-Bibliotheken.

Code
Import:
Template:
Component:

Overlay-System

Positionierte Overlays und schwebende Elemente erstellen

Beispiele:
Overlay-Service

HubOverlayService zur programmatischen Erstellung von Overlays

A connected overlay positioned below the trigger, with a backdrop that closes it on outside click.

Overlay-Referenz

OverlayRef zur Verwaltung des Overlay-Lebenszyklus

A connected overlay positioned below the trigger, with a backdrop that closes it on outside click.

Positionierung

ConnectionPositionPair für flexible Positionierung

A connected overlay positioned below the trigger, with a backdrop that closes it on outside click.

Popup-Service

Vereinfachte Popup-Verwaltung

Beispiele:
Popup-Erstellung

HubPopupService zur schnellen Popup-Erstellung

A connected overlay positioned below the trigger, with a backdrop that closes it on outside click.

Pipes

Utility-Pipes für Templates

Beispiele:
Pipes zur Typprüfung

IsStringPipe, IsObjectPipe, IsObservablePipe

GetPipe - Access nested properties

user | get:'profile.name'→ John Doe
user | get:'profile.address.city'→ New York

IsStringPipe - Type checking

'Hello' | isString→ true
123 | isString→ false

IsObjectPipe - Object detection

{ a: 1 } | isObject→ true
'string' | isObject→ false

UcfirstPipe - Capitalize first letter

'hello world' | ucfirst→ Hello world
GetPipe

Auf verschachtelte Objekteigenschaften per Punktnotation zugreifen

GetPipe - Access nested properties

user | get:'profile.name'→ John Doe
user | get:'profile.address.city'→ New York

IsStringPipe - Type checking

'Hello' | isString→ true
123 | isString→ false

IsObjectPipe - Object detection

{ a: 1 } | isObject→ true
'string' | isObject→ false

UcfirstPipe - Capitalize first letter

'hello world' | ucfirst→ Hello world
UcfirstPipe

Den ersten Buchstaben eines Strings großschreiben

GetPipe - Access nested properties

user | get:'profile.name'→ John Doe
user | get:'profile.address.city'→ New York

IsStringPipe - Type checking

'Hello' | isString→ true
123 | isString→ false

IsObjectPipe - Object detection

{ a: 1 } | isObject→ true
'string' | isObject→ false

UcfirstPipe - Capitalize first letter

'hello world' | ucfirst→ Hello world
UnwrapAsyncPipe

Observables und Promises in Templates entpacken

GetPipe - Access nested properties

user | get:'profile.name'→ John Doe
user | get:'profile.address.city'→ New York

IsStringPipe - Type checking

'Hello' | isString→ true
123 | isString→ false

IsObjectPipe - Object detection

{ a: 1 } | isObject→ true
'string' | isObject→ false

UcfirstPipe - Capitalize first letter

'hello world' | ucfirst→ Hello world

Hilfsfunktionen

Hilfsfunktionen für allgemeine Zwecke

Beispiele:
Type Guards

isString(), isNumber(), isDefined(), isPromise()

Type Guards

isString('hello')→ true
isNumber(42)→ true
isDefined(null)→ false
isDefined('value')→ true

Deep Equality

equals({a:1}, {a:1})→ true
equals([1,2], [1,2])→ true

Object Access

getValue(user, 'profile.name')→ John Doe

String Interpolation

interpolateString('Hello {{name}}', {name: 'World'})→ Hello World

String Utilities

removeAccents('Ñoño café')→ Nono cafe
padNumber(5)→ 05
String-Utilities

removeAccents(), interpolateString(), regExpEscape()

Type Guards

isString('hello')→ true
isNumber(42)→ true
isDefined(null)→ false
isDefined('value')→ true

Deep Equality

equals({a:1}, {a:1})→ true
equals([1,2], [1,2])→ true

Object Access

getValue(user, 'profile.name')→ John Doe

String Interpolation

interpolateString('Hello {{name}}', {name: 'World'})→ Hello World

String Utilities

removeAccents('Ñoño café')→ Nono cafe
padNumber(5)→ 05
Objekt-Utilities

equals() für tiefen Vergleich, getValue() für Punktnotation

Type Guards

isString('hello')→ true
isNumber(42)→ true
isDefined(null)→ false
isDefined('value')→ true

Deep Equality

equals({a:1}, {a:1})→ true
equals([1,2], [1,2])→ true

Object Access

getValue(user, 'profile.name')→ John Doe

String Interpolation

interpolateString('Hello {{name}}', {name: 'World'})→ Hello World

String Utilities

removeAccents('Ñoño café')→ Nono cafe
padNumber(5)→ 05
DOM-Utilities

closest(), reflow(), getActiveElement()

Type Guards

isString('hello')→ true
isNumber(42)→ true
isDefined(null)→ false
isDefined('value')→ true

Deep Equality

equals({a:1}, {a:1})→ true
equals([1,2], [1,2])→ true

Object Access

getValue(user, 'profile.name')→ John Doe

String Interpolation

interpolateString('Hello {{name}}', {name: 'World'})→ Hello World

String Utilities

removeAccents('Ñoño café')→ Nono cafe
padNumber(5)→ 05
RxJS-Utilities

runInZone()-Operator für die NgZone-Integration

Type Guards

isString('hello')→ true
isNumber(42)→ true
isDefined(null)→ false
isDefined('value')→ true

Deep Equality

equals({a:1}, {a:1})→ true
equals([1,2], [1,2])→ true

Object Access

getValue(user, 'profile.name')→ John Doe

String Interpolation

interpolateString('Hello {{name}}', {name: 'World'})→ Hello World

String Utilities

removeAccents('Ñoño café')→ Nono cafe
padNumber(5)→ 05

Scrollbar-Utilities

Scrollbar-Breite messen und kompensieren

Beispiele:
Scrollbar-Breite

Funktionen scrollbarWidth() und scrollbarPadding()

ScrollBar Service

The ScrollBar service helps manage scrollbar visibility and compensate for layout shifts when hiding scrollbars (e.g., when opening modals).

Use Case: Modal Body Lock

When opening a modal, you typically hide the body scrollbar. The ScrollBar.hide() method handles this automatically and returns a reverter function.

Status: 🔓 Normal scrolling

Code Example

import { inject } from '@angular/core';
import { ScrollBar } from 'ng-hub-ui-utils';

export class ModalService {
  private scrollBar = inject(ScrollBar);
  private revertScrollbar: (() => void) | null = null;

  openModal() {
    // Hide scrollbar and get reverter function
    this.revertScrollbar = this.scrollBar.hide();
  }

  closeModal() {
    // Restore scrollbar
    if (this.revertScrollbar) {
      this.revertScrollbar();
      this.revertScrollbar = null;
    }
  }
}

Transitions

CSS-Transition-Helfer

Beispiele:
Transition ausführen

hubRunTransition() für programmatische CSS-Transitions

Die Live-Vorschau ist für dieses Beispiel noch nicht verfügbar.

Tooltip

Leichte, thematisierbare Tooltips für beliebige Elemente über die [tooltip]-Direktive.

Beispiele:
Tooltip-Direktive

[tooltip] mit einer Platzierung anwenden, um beim Hover oder Fokus eine positionierte Beschriftung anzuzeigen, gestaltet über die --hub-tooltip-*-Variablen.

Placements (hover the buttons)
Themed with --hub-tooltip-* variables

Hauptfunktionen

Letzte Änderungen

Version 22.8.0 - 8/14/26, 12:00 AM

added: provideHubTranslationAdapter() — the application-wide reactive bridge from an external translation service (transloco, ngx-translate, i18next…) into HubTranslationService. Register it once at bootstrap and every ng-hub-ui library picks up the host dictionary, re-emitting on every language change. Supports optional namespacing and deliberate per-label reactive overrides.

added: HUB_TRANSLATION_PREFIX — injection token that scopes the lookups of a library to a collision-safe HUBUI.<LIBRARY>.* namespace. TranslatePipe resolves the prefixed key first and falls back to the bare key, so existing flat dictionaries keep working untouched.

Version 22.7.2 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.7.1 - 7/27/26, 12:00 AM

fixed: --hub-overlay-zindex / --hub-overlay-backdrop-zindex actually work now: OverlayRef resolves its inline z-index through var(--hub-overlay-zindex, 1000) / var(--hub-overlay-backdrop-zindex, 999) instead of literal values, so re-stacking an overlay no longer requires !important. Defaults are unchanged.

added: OverlayConfig.zIndex — optional explicit layer for a single overlay instance; when set it takes precedence over the token.

Version 22.7.0 - 7/7/26, 12:00 AM

added: resolveHubAccent(value) — the canonical "any colour" accent resolver shared across the ng-hub-ui family: barewords map to var(--hub-sys-color-<name>, <name>), literal #hex / rgb() / oklch() / var() values pass through unchanged, empty values yield null.

Version 22.6.1 - 7/2/26, 12:00 AM

fixed: CSS variable fallbacks realigned to the ds light defaults (e.g. --hub-ref-font-family-base falls back to the system-ui stack instead of inherit); fallbacks only apply when ng-hub-ui-ds is not loaded.

Version 22.6.0 - 6/30/26, 12:00 AM

added: HubOverflowTooltipDirective ([hubOverflowTooltip]) — shows a tooltip only while the host label is actually truncated, with live tracking via ResizeObserver + MutationObserver.

added: Agnostic tooltip token — HUB_TOOLTIP_ADAPTER plus provideHubTooltip(adapter) let any tooltip implementation back [hubOverflowTooltip], app-wide or per subtree; defaults to the built-in hubTooltipAdapter.

Verwandte Bibliotheken

ng-hub-ui-modal ng-hub-ui-portal ng-hub-ui-paginable