Angular Modal Component | ng-hub-ui-modal

Accessible Angular modal component with stacking, fullscreen mode, templates, keyboard handling and CSS variables for standalone apps.

Overview

Why teams search for this library

This Angular modal component is built for teams that need accessible dialogs, composable content, service-driven control and design-system friendly styling in standalone Angular apps.

Install

npm install ng-hub-ui-modal

Jump to

Ideal for

  • confirmation dialogs
  • forms in overlays
  • detail panels
  • stacked workflows

About modal

ng-hub-ui-modal solves one of the most common UI needs in Angular products: opening dialogs that feel robust in production. It covers stacked modals, fullscreen flows, keyboard handling, projections and service-based usage without turning modal logic into a per-project problem.

Feature guides

Opening Modals (Content Types)

Demonstrates opening modals with TemplateRef, Component, and String content.

Configuration & Options

Customize modal appearance and behavior

Modal Reference (HubModalRef)

Control and access the state of opened modals

Active Modal (HubActiveModal)

Interact with the modal from within its content

Stack Management

Managing multiple stacked modals

Key features

Stacked modal workflows

Open and manage multiple dialogs safely when products need nested decisions or chained flows.

Accessible dialog behavior

Includes focus handling, escape support, backdrop control and ARIA-friendly dialog semantics.

Templates and service control

Works with templates and dynamic components so teams can compose confirmation, form and detail flows.

Recent changes

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

Related libraries

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