Angular Modal-Komponente | ng-hub-ui-modal

Barrierefreie Angular Modal-Komponente mit Stapelung, Fullscreen-Modus, Templates, Tastatursteuerung und CSS-Variablen für standalone Apps.

Zuletzt aktualisiert 21.08.2026

Übersicht

Warum Teams nach dieser Bibliothek suchen

Diese Angular Modal-Komponente ist für Teams gebaut, die barrierefreie Dialoge, komponierbare Inhalte, servicegesteuerte Kontrolle und design-system-freundliches Styling in standalone Angular-Apps benötigen.

Installieren

npm install ng-hub-ui-modal

Springen zu

Ideal für

  • Bestätigungsdialoge
  • Formulare in Overlays
  • Detailpanels
  • gestapelte Workflows

Über modal

ng-hub-ui-modal löst eine der häufigsten UI-Anforderungen in Angular-Produkten: Dialoge zu öffnen, die sich in der Produktion robust anfühlen. Es deckt gestapelte Modals, Fullscreen-Flows, Tastatursteuerung, Projektionen und servicebasierte Nutzung ab, ohne die Modal-Logik zu einem projektweisen Problem zu machen.

Funktionsleitfäden

Modals öffnen (Inhaltstypen)

Zeigt das Öffnen von Modals mit TemplateRef-, Component- und String-Inhalt.

Konfiguration und Optionen

Darstellung und Verhalten des Modals anpassen

Modal-Referenz (HubModalRef)

Zustand geöffneter Modals steuern und darauf zugreifen

Aktives Modal (HubActiveModal)

Mit dem Modal aus seinem eigenen Inhalt heraus interagieren

Stack-Verwaltung

Mehrere gestapelte Modals verwalten

Hauptfunktionen

Letzte Änderungen

Version 22.6.0 - 8/17/26, 12:00 AM

added: The dialog now travels between heights instead of jumping. A modal is sized by whatever it holds, so a wizard step or an async panel changing would snap the box to its new height in a single frame. The obvious repair does not work and was measured rather than assumed: the specified height is auto before the change and auto after it, and a CSS transition only fires when the specified value changes — the content moved, the property did not. interpolate-size does not help either; it interpolates to a keyword, it does not notice a box growing underneath one. So both heights are measured and animated explicitly, which also behaves identically in every browser. Tuned with --hub-modal-resize-duration and --hub-modal-resize-easing, disabled by [animation]="false" and by prefers-reduced-motion. Width already animated and is untouched.

Version 22.5.1 - 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.5.0 - 7/27/26, 12:00 AM

changed: Typed modal flows: open<C, R, D>(content, options) infers the content component type, so HubModalRef.componentInstance is the component instance (no more as unknown as casts); R types the result end to end (close(result?), result: Promise<R>, closed: Observable<R>, HubActiveModal<D, R>) and HubModalOptions<D> types the data payload. All generics default to the previous loose types, so existing call sites compile unchanged.

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

fixed: Declared the real ng-hub-ui-utils peer range (>=22.0.0); the previous >=1.0.0 floor allowed resolving an incompatible utils major.

Version 22.3.0 - 7/5/26, 12:00 AM

added: Typed modal payload: inject the new HUB_MODAL_DATA token or use inject(HubActiveModal).data (HubActiveModal is now generic, HubActiveModal<D>) instead of the old untyped data field (now deprecated).

Version 21.0.2 - 3/31/26, 12:00 AM

changed: Standardized padding variables and improved fullscreen layout responsiveness.

Version 21.0.1 - 3/19/26, 12:00 AM

changed: Removed hardcoded design system token defaults from stylesheet; all --hub-modal-* variables retain literal fallback values.

fixed: Fixed modal-backdrop and modal unit test reliability.

Version 21.0.0 - 3/10/26, 12:00 AM

added: HubModalPlacement configuration for anchored modal positioning.

changed: BREAKING: Standardized CSS class names to hub-modal BEM convention.

Version 1.2.0 - 1/7/25, 12:00 AM

added: Documentation and examples update

Verwandte Bibliotheken

ng-hub-ui-portal ng-hub-ui-utils