Компонент Modal для Angular | ng-hub-ui-modal

Доступный компонент modal для Angular с наложением, полноэкранным режимом, шаблонами, обработкой клавиатуры и CSS-переменными для standalone-приложений.

Последнее обновление 21 авг. 2026 г.

Обзор

Почему команды ищут эту библиотеку

Этот компонент modal для Angular создан для команд, которым нужны доступные диалоги, компонуемый контент, управление через сервис и стилизация, дружественная к дизайн-системам, в standalone-приложениях Angular.

Установка

npm install ng-hub-ui-modal

Перейти к

Идеально для

  • диалоги подтверждения
  • формы в оверлеях
  • панели деталей
  • наложенные рабочие процессы

О библиотеке modal

ng-hub-ui-modal решает одну из самых распространённых потребностей UI в продуктах Angular: открытие диалогов, которые надёжно ведут себя в продакшене. Он покрывает наложенные модальные окна, полноэкранные потоки, обработку клавиатуры, проекции и использование на основе сервиса, не превращая логику модальных окон в проблему каждого проекта.

Руководства по возможностям

Открытие модальных окон (типы контента)

Демонстрирует открытие модальных окон с контентом на основе TemplateRef, Component и String.

Настройка и опции

Настройка внешнего вида и поведения модального окна

Ссылка на модальное окно (HubModalRef)

Управление состоянием открытых модальных окон и доступ к нему

Активное модальное окно (HubActiveModal)

Взаимодействие с модальным окном изнутри его контента

Управление стеком

Управление несколькими наложенными модальными окнами

Ключевые возможности

Последние изменения

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

Связанные библиотеки

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