API reference

Here's the full contract for board: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial board in with 5 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`board`	`Board`	`undefined`	The full board definition to render: an object whose columns array holds the column and card data displayed by the component.
`boardLabel`	`string`	`'Board'`	Accessible name of the board list container.
`variant`	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| string`	`undefined`	Semantic accent of the drag-and-drop placeholder. Accepts the built-in design-system accents, any registered custom accent name, or a literal colour (#hex, rgb(), oklch(), CSS named colour); defaults to the primary accent when unset.
`columnSortingDisabled`	`boolean`	`false`	When true, column reordering via drag-and-drop is disabled for the whole board.
`dragBehavior`	`'ghost' \| 'hide' \| 'collapse'`	`'collapse'`	Controls how the dragged element looks during a drag: 'ghost' keeps it visible at half opacity, 'hide' makes it invisible but keeps its space, and 'collapse' removes it and its space entirely.

Outputs

React to what board does — 4 events to hook your logic onto.

Name	Type	Description
`onCardClick`	`OutputEmitterRef<BoardCard>`	Emits the clicked card each time a card is clicked within the board.
`onCardMoved`	`OutputEmitterRef<CardDragDropEvent>`	Emits when a card is repositioned — within its column or into another column — via pointer drag or keyboard move, with previous/current indexes and source/target columns.
`onColumnMoved`	`OutputEmitterRef<ColumnDragDropEvent>`	Emits when columns are reordered through drag-and-drop, with the previous and current column indexes.
`reachedEnd`	`OutputEmitterRef<ReachedEndEvent>`	Emits when a column body is scrolled to its bottom, with the column index and data — enables infinite-scroll loading.

Templates

Make it yours — 7 template slots let you project custom markup.

Name	Description	Example
`cardTpt`	Replaces the default card body. The template context exposes item (the card) and column (the column that owns it), so bind 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`	Replaces the default column header. The template context exposes column.	`<ng-template columnHeaderTpt let-column="column"> <h5>{{ column.title }}</h5> <span>{{ column.cards.length }} cards</span> </ng-template>`
`columnFooterTpt`	Adds a footer under a column body. The template context exposes column; with no template, no footer is rendered.	`<ng-template columnFooterTpt let-column="column"> <button type="button" (click)="addCard(column)">Add card</button> </ng-template>`
`cardPlaceholder`	Custom drop zone shown while a card is dragged. The template context exposes card (the dragged card) and column (the target column).	`<ng-template cardPlaceholder let-card="card" let-column="column"> <div class="drop-zone">Drop "{{ card?.title }}" in {{ column.title }}</div> </ng-template>`
`columnPlaceholder`	Custom drop zone shown while a column is dragged. The template context exposes column (the dragged column).	`<ng-template columnPlaceholder let-column="column"> <div class="drop-zone">Drop column here</div> </ng-template>`
`cardDragPreview`	Custom element that follows the cursor while a card is dragged. The template context exposes card and column (the source column).	`<ng-template cardDragPreview let-card="card" let-column="column"> <div class="preview">{{ card.title }} — {{ column.title }}</div> </ng-template>`
`columnDragPreview`	Custom element that follows the cursor while a column is dragged. The template context exposes column.	`<ng-template columnDragPreview let-column="column"> <div class="preview">{{ column.title }}</div> </ng-template>`