API リファレンス

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

インプット

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

名前	型	デフォルト	説明
`board`	`Board`	`undefined`	レンダリングするボード全体の定義：columns 配列に、コンポーネントが表示するカラムとカードのデータを保持するオブジェクトです。
`boardLabel`	`string`	`'Board'`	ボードのリストコンテナのアクセシブルな名前。
`variant`	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| string`	`undefined`	ドラッグ＆ドロップのプレースホルダーのセマンティックアクセント。デザインシステム組み込みのアクセント、登録済みの任意のカスタムアクセント名、またはリテラルカラー（#hex、rgb()、oklch()、CSS の名前付きカラー）を受け付けます。未設定の場合は primary アクセントがデフォルトです。
`columnSortingDisabled`	`boolean`	`false`	true の場合、ボード全体でドラッグ＆ドロップによるカラムの並べ替えが無効になります。
`dragBehavior`	`'ghost' \| 'hide' \| 'collapse'`	`'collapse'`	ドラッグ中の要素の見た目を制御します：'ghost' は半分の不透明度で表示したままにし、'hide' は非表示にしつつスペースを保持し、'collapse' は要素とそのスペースを完全に取り除きます。

アウトプット

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

名前	型	説明
`onCardClick`	`OutputEmitterRef<BoardCard>`	ボード内でカードがクリックされるたびに、クリックされたカードを発行します。
`onCardMoved`	`OutputEmitterRef<CardDragDropEvent>`	ポインタードラッグまたはキーボード操作でカードが移動されたとき（同じカラム内または別のカラムへ）に発行され、移動前後のインデックスと移動元／移動先のカラムを伴います。
`onColumnMoved`	`OutputEmitterRef<ColumnDragDropEvent>`	ドラッグ＆ドロップでカラムが並べ替えられたときに発行され、並べ替え前後のカラムインデックスを伴います。
`reachedEnd`	`OutputEmitterRef<ReachedEndEvent>`	カラム本文が最下部までスクロールされたときに、カラムのインデックスとデータを伴って発行されます — 無限スクロール読み込みを実現できます。

テンプレート

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

名前	説明	サンプル
`cardTpt`	カードの既定の本体を置き換えます。テンプレートのコンテキストは item（カード）と column（そのカードが属する列）を公開するため、let-card="item" とバインドします。	`<hub-board [board]="board()"> <ng-template cardTpt let-card="item" let-column="column"> <strong>{{ card.title }}</strong> <small>{{ column.title }}</small> </ng-template> </hub-board>`
`columnHeaderTpt`	列の既定のヘッダーを置き換えます。テンプレートのコンテキストは column を公開します。	`<ng-template columnHeaderTpt let-column="column"> <h5>{{ column.title }}</h5> <span>{{ column.cards.length }} cards</span> </ng-template>`
`columnFooterTpt`	列の本体の下にフッターを追加します。テンプレートのコンテキストは column を公開します。テンプレートがなければフッターは描画されません。	`<ng-template columnFooterTpt let-column="column"> <button type="button" (click)="addCard(column)">Add card</button> </ng-template>`
`cardPlaceholder`	カードのドラッグ中に表示されるカスタムのドロップ領域です。コンテキストは card（ドラッグ中のカード）と column（ドロップ先の列）を公開します。	`<ng-template cardPlaceholder let-card="card" let-column="column"> <div class="drop-zone">Drop "{{ card?.title }}" in {{ column.title }}</div> </ng-template>`
`columnPlaceholder`	列のドラッグ中に表示されるカスタムのドロップ領域です。コンテキストは column（ドラッグ中の列）を公開します。	`<ng-template columnPlaceholder let-column="column"> <div class="drop-zone">Drop column here</div> </ng-template>`
`cardDragPreview`	カードのドラッグ中にカーソルへ追従するカスタム要素です。コンテキストは card と column（ドラッグ元の列）を公開します。	`<ng-template cardDragPreview let-card="card" let-column="column"> <div class="preview">{{ card.title }} — {{ column.title }}</div> </ng-template>`
`columnDragPreview`	列のドラッグ中にカーソルへ追従するカスタム要素です。コンテキストは column を公開します。	`<ng-template columnDragPreview let-column="column"> <div class="preview">{{ column.title }}</div> </ng-template>`