Angular モーダルコンポーネント | ng-hub-ui-modal
スタッキング、フルスクリーンモード、テンプレート、キーボード処理、CSS 変数を備えたアクセシブルな Angular モーダルコンポーネント。standalone アプリ向けです。
最終更新 2026/08/21
概要
チームがこのライブラリを探す理由
この Angular モーダルコンポーネントは、standalone な Angular アプリで、アクセシブルなダイアログ、構成可能なコンテンツ、サービス駆動の制御、デザインシステムに優しいスタイルを必要とするチーム向けに作られています。
インストール
npm install ng-hub-ui-modalジャンプ
最適な用途
- 確認ダイアログ
- オーバーレイ内のフォーム
- 詳細パネル
- スタックしたワークフロー
について modal
ng-hub-ui-modal は、Angular プロダクトで最も一般的な UI ニーズの 1 つを解決します。本番でも堅牢に感じられるダイアログを開くことです。スタックしたモーダル、フルスクリーンフロー、キーボード処理、プロジェクション、サービスベースの利用に対応し、モーダルロジックをプロジェクトごとの問題にしません。
機能ガイド
モーダルを開く（コンテンツタイプ）
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