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

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

Ü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 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