Angular Modal Component | ng-hub-ui-modal
Accessible Angular modal component with stacking, fullscreen mode, templates, keyboard handling and CSS variables for standalone apps.
Interactive examples
Explore live examples that show how the library behaves in common Angular use cases.
Modal Content Types
The open() method accepts various content types:
Configuration Options
Modal Placements
Offcanvas: a drawer that touches its edge
With the switch off, look at the bottom edge and at the corners on the side it slid out of.
Modal Reference Control
Active Modal (Self-Closing)
This example opens a component (not a template) that injects HubActiveModal.
Typed data payload
Stacked Modals
HubModal supports multiple stacked modals. The last modal has focus.
Fullscreen Modal
Content Projection
This example demonstrates how to create reusable wrapper components for modal content.
Named 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.
Semantic variants: one accent, the whole dialog
The nine on the first row are the built-ins. brand is not one of them: it is six declarations in this example's own stylesheet, five of which only name another --hub-modal-accent-* role.
Styling with CSS Variables
Open a modal themed with --hub-modal-* variables.