API リファレンス

modal の完全な仕様をここにまとめました。バインド、リッスン、プロジェクション、テーマ設定ができるすべてが一か所に集約されています。必要なものを接続し、好きなようにスタイリングしてください — standalone で signal フレンドリーです。

インプット

27 個のインプットで modal を調整。通常の Angular @Input と同じようにバインドできます。

名前	型	デフォルト	説明
`animation`	`boolean`	—	true の場合、モーダルの開閉がアニメーションされます。デフォルト: true
`ariaLabelledBy`	`string`	—	ダイアログにラベルを与える要素の ID。モーダルウィンドウの `aria-labelledby` として適用されます。
`ariaDescribedBy`	`string`	—	ダイアログを説明する要素の ID。モーダルウィンドウの `aria-describedby` として適用されます。
`closeAriaLabel`	`string`	`'Close'`	ライブラリが自前のヘッダーに描く閉じるボタンのアクセシブル名。このボタンにはテキストがなく、記号は CSS が描いているため、この文字列がスクリーンリーダーの読み上げるすべてです。翻訳した文字列をここに渡すか、`HubModalConfig` で既定値を一度だけ設定してください。デフォルト: "Close"
`backdrop`	`boolean \| "static"`	—	true の場合、バックドロップ要素が作成されます。あるいは "static" を指定すると、クリックでモーダルが閉じないバックドロップになります。デフォルト: true
`beforeDismiss`	`() => boolean \| Promise<boolean>`	—	モーダルが破棄される直前に呼ばれるガード。`false`、`false` で解決される Promise、または拒否された Promise を返すと、ダイアログは開いたままになります。
`centered`	`boolean`	—	true の場合、モーダルは垂直方向に中央揃えされます。デフォルト: false
`closeOnNavigation`	`boolean`	`true`	アプリケーションの URL が変わるとダイアログを閉じます。理由は `ModalDismissReasons.NAVIGATION` です。ダイアログは開いた画面のものです。開いたままだと次の画面を覆い、その背景がすべてのクリックを飲み込みます。パスやクエリ文字列の変更は対象ですが、アンカーの変更は対象外です。同じ画面の中で読み手を動かすだけだからです。自分で遷移し開いたままでいる必要があるダイアログでは `false` にします。既定値は `true`。
`closeButton`	`boolean`	`true`	ダイアログが自前のヘッダーに閉じるボタンを描くかどうか。`false` では隠すのではなく DOM から外します。CSS で隠したボタンはスクリーンリーダーが読み上げ、タブ順も届くため、自由な出口のないダイアログには向きません。対象はそのボタンだけで、`backdrop: 'static'` と `keyboard: false` が残る二つの出口です。既定値は `true`。
`placement`	`HubModalPlacement`	—	ビューポート内のモーダルの配置位置を制御します。デフォルト: HubModalPlacement.Center
`offcanvas`	`boolean`	`false`	ダイアログを引き出しとして開きます。`placement` が指す縁にぴったり寄せ、その側の角を落とし、全高（上下からなら全幅）まで伸ばし、本文がスクロールするのでヘッダーとフッターは動きません。幅はサイズスケールではなく `--hub-modal-offcanvas-width` から取ります。`size: 'lg'` は800pxで、狭いウィンドウでは引き出しが並べて読まれるはずの文書そのものを覆ってしまうからです。`placement` を省くと終端の縁から開きます。
`container`	`string \| HTMLElement`	—	モーダルウィンドウを追加する CSS セレクターまたは要素。デフォルト: `body`
`fullscreen`	`boolean \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| string`	—	`true` はどの幅でもダイアログを全画面に保ちます。`"md"` のようなブレークポイント名なら、その幅より下でのみ全画面になります。それ以外の文字列は `modal-fullscreen-<値>-down` を適用します。デフォルト: false
`injector`	`Injector`	—	コンテンツコンポーネントの依存関係を解決するために使う Injector。
`keyboard`	`boolean`	—	true の場合、Escape キーが押されるとモーダルが閉じます。デフォルト: true
`scrollable`	`boolean`	—	ダイアログを固定し、ビューポートを超えて伸ばす代わりに本文をスクロールさせます。デフォルト: false
`size`	`"sm" \| "lg" \| "xl" \| string`	—	モーダルウィンドウのサイズ
`variant`	`"primary" \| "success" \| "danger" \| "warning" \| "info" \| string`	—	ダイアログのセマンティックなアクセント。破壊的な確認や成功の通知など、意味を持つダイアログのためのものです。単一のスロット `--hub-modal-accent` を置き換えると、emphasis / subtle / on / border の各ロールがダイアログ自身の上でそこから導出されるので、値ひとつで色を帯びた背景、外枠とヘッダー・フッターの罫線、そしてタイトルまでが塗り替わります。スタイルシートには9つが同梱されています：`primary`、`secondary`、`success`、`danger`、`warning`、`info`、`neutral`、`light`、`dark`。それ以外の任意の文字列も受け付け、ウィンドウに `hub-modal--<名前>` を付けます。独自のアクセントはグローバルなスタイルシートの1ルールだけで済み、再ビルドは不要です。上端のアクセントバーもこの一式に含まれますが、幅ゼロで出荷されます。ダイアログに `--hub-modal-accent-bar-width` を設定すると表示されます。variant を指定しなければダイアログはニュートラルなままです。
`windowClass`	`string`	—	モーダルウィンドウに付加するカスタムクラス
`modalDialogClass`	`string`	—	`hub-modal__dialog` 要素に追加するカスタムクラス
`backdropClass`	`string`	—	モーダルのバックドロップに付加するカスタムクラス
`dismissSelector`	`string`	—	モーダルウィンドウの dismiss をトリガーできる要素のカスタムセレクタ。デフォルト: "[data-dismiss=\"modal\"]"
`closeSelector`	`string`	—	モーダルウィンドウの close をトリガーできる要素のカスタムセレクタ。デフォルト: "[data-close=\"modal\"]"
`headerSelector`	`string`	—	モーダルウィンドウのヘッダー要素のカスタムセレクタ
`footerSelector`	`string`	—	モーダルウィンドウのフッター要素のカスタムセレクタ
`bodySelector`	`string`	—	子要素が本文になるブロックの CSS セレクター。指定しない場合、本文はヘッダーとフッターが残したもので、コンテンツを書いた順序に左右されます。指定すると本文は意図した位置に置かれ、どのスロットにも取られなかったものは引き続きその後ろに続きます。
`data`	`D`	—	モーダルウィンドウを開くときに渡す追加データ

アウトプット

modal の動作に反応 — ロジックを接続できる 1 個のイベント。

名前	型	説明
`dismiss`	`any`	ユーザーがモーダルを dismiss したとき（Escape キーを押す、バックドロップをクリックする、組み込みの閉じるボタンを押すなど）にモーダルウィンドウから発行されます。ペイロードは dismiss の理由です（ModalDismissReasons.ESC、ModalDismissReasons.BACKDROP_CLICK、またはカスタム値）。

メソッド

modal をコードから操作 — プログラム操作のための 17 個のメソッドを備えています。

名前	シグネチャ	戻り値	説明
`HubModal.open`	`open<C, R, D>(content: Type<C> \| TemplateRef<any> \| string, options?: HubModalOptions<D>): HubModalRef<C, R>`	`HubModalRef<C, R>`	指定されたコンテンツ（コンポーネント型、TemplateRef、または文字列）とオプションで新しいモーダルウィンドウを開き、それを制御するための HubModalRef を返します。コンテンツコンポーネントは HubActiveModal と HUB_MODAL_DATA トークンを注入して、モーダルとやり取りしたり data ペイロードを読み取ったりできます。
`HubModal.dismissAll`	`dismissAll(reason?: any): void`	—	現在表示されているすべてのモーダルウィンドウを、指定された理由で dismiss します。
`HubModal.hasOpenModals`	`hasOpenModals(): boolean`	`boolean`	アプリケーション内に現在開いているモーダルウィンドウがあるかどうかを示します。
`HubModal.activeInstances`	`activeInstances: EventEmitter<HubModalRef[]>`	`EventEmitter<HubModalRef[]>`	モーダルが開かれるか削除されるたびに、現在開いている HubModalRef インスタンスのリストを発行するイベントエミッター。
`HubModalRef.close`	`close(result?: R): void`	—	省略可能な結果値とともにモーダルを閉じます。HubModalRef.result の Promise は指定された値で解決されます。
`HubModalRef.dismiss`	`dismiss(reason?: any): void`	—	省略可能な理由の値とともにモーダルを dismiss します。HubModalRef.result の Promise は指定された値で拒否されます。beforeDismiss ガードが設定されている場合はそれに従います。
`HubModalRef.update`	`update(options: HubModalUpdatableOptions): void`	—	開いているモーダルのオプション（aria 属性、centered、placement、fullscreen、backdropClass、size、variant、windowClass、modalDialogClass）を更新します。
`HubModalRef.componentInstance`	`componentInstance: C \| void`	`C \| void`	モーダルコンテンツとして使用されたコンポーネントのインスタンス。コンテンツに TemplateRef を使用した場合や、モーダルが閉じられている場合は undefined を返します。
`HubModalRef.result`	`result: Promise<R>`	`Promise<R>`	モーダルが閉じられたときに close の結果で解決され、dismiss されたときにその理由で拒否される Promise。
`HubModalRef.closed`	`closed: Observable<R>`	`Observable<R>`	モーダルが閉じられたときに、close() に渡された結果を発行する Observable。
`HubModalRef.dismissed`	`dismissed: Observable<any>`	`Observable<any>`	モーダルが dismiss されたときにその理由を発行する Observable — dismiss() に渡された値、またはバックドロップクリックや Escape などの内部的な理由です。
`HubModalRef.shown`	`shown: Observable<void>`	`Observable<void>`	モーダルが完全に表示され、開くアニメーションが終了した時点で発行して完了する Observable。
`HubModalRef.hidden`	`hidden: Observable<void>`	`Observable<void>`	モーダルウィンドウとバックドロップの両方が非表示になり、アニメーションが終了し、それらの要素が DOM から削除された時点で発行して完了する Observable。
`HubActiveModal.close`	`close(result?: R): void`	—	コンテンツコンポーネントをホストしているモーダルを閉じ、HubModalRef.result の Promise を省略可能な結果値で解決します。
`HubActiveModal.dismiss`	`dismiss(reason?: any): void`	—	コンテンツコンポーネントをホストしているモーダルを dismiss し、HubModalRef.result の Promise を省略可能な理由の値で拒否します。
`HubActiveModal.update`	`update(options: HubModalUpdatableOptions): void`	—	コンテンツコンポーネントの内側から、開いているモーダルのオプションを更新します。
`HubActiveModal.data`	`data: D`	`D`	HubModalOptions.data を通じて渡される型付きペイロード。HUB_MODAL_DATA トークンを注入するのと同等で、data オプションが指定されなかった場合は null になります。

テンプレート

自分好みに — 1 個のテンプレートスロットでカスタムマークアップをプロジェクションできます。

名前	説明	サンプル
`Modal Template`	モーダルサービスに渡せるテンプレート参照。ヘッダー・本文・フッターのブロックは、`open()` で `headerSelector`・`bodySelector`・`footerSelector` を指定したときにのみスロットになります。指定しなければテンプレート全体が本文に入ります。	<ng-template #modalTemplate let-close="close" let-dismiss="dismiss"> <div hubModalHeader> <h4 class="hub-modal__title">Modal Title</h4> </div> <div hubModalBody> Modal content goes here </div> <div hubModalFooter> <button hubButton color="secondary" (click)="dismiss()">Cancel</button> <button hubButton color="primary" (click)="close('result')">OK</button> </div> </ng-template> <!-- The three blocks become slots only when the selectors are given: this.modal.open(this.modalTemplate, { headerSelector: '[hubModalHeader]', bodySelector: '[hubModalBody]', footerSelector: '[hubModalFooter]' }); Without them the whole template lands in hub-modal__body. -->