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

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

Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

Modal-Inhaltstypen

The open() method accepts various content types:

Konfigurationsoptionen

Sizes:
Position:
Behavior:
Content:

Modal-Platzierungen

Steuerung über Modal-Referenz

Aktives Modal (selbstschließend)

This example opens a component (not a template) that injects HubActiveModal.

Typisierte Daten-Payload

Gestapelte Modals

HubModal supports multiple stacked modals. The last modal has focus.

Vollbild-Modal

Content Projection

This example demonstrates how to create reusable wrapper components for modal content.

Benannter Body-Slot

The body used to be the one slot with no name — whatever survived the header and the footer being taken out. bodySelector gives it one, so the order the content happens to be written in stops deciding what the body is.

Nothing is ever dropped: what no selector claims still follows the named body.

Styling mit CSS-Variablen

Open a modal themed with --hub-modal-* variables.