API リファレンス

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

インプット

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

名前	型	デフォルト	説明
`animation`	`boolean`	—	true の場合、モーダルの開閉がアニメーションされます。デフォルト: true
`backdrop`	`boolean \| "static"`	—	true の場合、バックドロップ要素が作成されます。あるいは "static" を指定すると、クリックでモーダルが閉じないバックドロップになります。デフォルト: true
`centered`	`boolean`	—	true の場合、モーダルは垂直方向に中央揃えされます。デフォルト: false
`placement`	`HubModalPlacement`	—	ビューポート内のモーダルの配置位置を制御します。デフォルト: HubModalPlacement.Center
`keyboard`	`boolean`	—	true の場合、Escape キーが押されるとモーダルが閉じます。デフォルト: true
`closeOnNavigation`	`boolean`	—	true の場合、ユーザーがブラウザ履歴を戻ったとき（history.back()、ブラウザの戻るボタン）にモーダルが閉じます。デフォルト: true
`size`	`"sm" \| "lg" \| "xl" \| string`	—	モーダルウィンドウのサイズ
`windowClass`	`string`	—	モーダルウィンドウに付加するカスタムクラス
`backdropClass`	`string`	—	モーダルのバックドロップに付加するカスタムクラス
`dismissSelector`	`string`	—	モーダルウィンドウの dismiss をトリガーできる要素のカスタムセレクタ。デフォルト: "[data-dismiss=\"modal\"]"
`closeSelector`	`string`	—	モーダルウィンドウの close をトリガーできる要素のカスタムセレクタ。デフォルト: "[data-close=\"modal\"]"
`headerSelector`	`string`	—	モーダルウィンドウのヘッダー要素のカスタムセレクタ
`footerSelector`	`string`	—	モーダルウィンドウのフッター要素のカスタムセレクタ
`data`	`any`	—	モーダルウィンドウを開くときに渡す追加データ

アウトプット

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`	モーダルサービスに渡せるテンプレート参照	`<ng-template #modalTemplate let-close="close" let-dismiss="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body"> Modal content goes here </div> <div class="modal-footer"> <button class="btn btn-secondary" (click)="dismiss()">Cancel</button> <button class="btn btn-primary" (click)="close('result')">OK</button> </div> </ng-template>`