Kanban Board for Angular

import { AuiKanban } from '@absoluteui/angular/kanban';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Kanban Board page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { kanban: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import type { KanbanCard, KanbanCardMoveDetail, KanbanColumn } from '@absoluteui/components/kanban';
import { AuiKanban } from '@absoluteui/angular/kanban';

@Component({
  selector: 'app-board',
  imports: [AuiKanban],
  template: `<aui-kanban label="Sprint" [columns]="columns" [cards]="cards" wipPolicy="block" (cardMoved)="moved($event)"></aui-kanban>`,
})
export class BoardComponent {
  columns: KanbanColumn[] = [{ id: 'todo', label: 'To do' }, { id: 'done', label: 'Done' }];
  cards: KanbanCard[] = [{ id: 'a', columnId: 'todo', title: 'Write the spec' }];

  moved(detail: KanbanCardMoveDetail): void {
    // send detail.id and detail.to to the server
    void detail;
  }
}

`<aui-kanban>`

Class AuiKanban; template reference #ref="auiKanban".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
`label`	`string`		Required. Accessible name of the board (role=group); the toolbar is named ‘{label} controls’. Non-empty.
`columns`	`readonly KanbanColumn[]`		Required. Columns in display order: { id (unique), label, wipLimit? (1..10000 cards across swimlanes), collapsed? (initial), locked? (no cards move into or out of it) }. At least one. Replacing it clears the undo history.
`lanes`	`readonly KanbanLane[]`		Swimlanes (rows): { id, label, collapsed? }. With lanes every card needs a laneId.
`editable`	`boolean`	`true`	Cards (and columns) can be moved. false hides the toolbar, grips, and column handles; arrow-key navigation and Enter still work.
`columnReorder`	`boolean`	`true`	Show column handles for reordering columns (when editable).
`renderCard`	`(card: Readonly<KanbanCard>, context: KanbanRenderContext) => Node`		Card content ({ column, lane, doc }). Return non-interactive content: the card is the focusable list item and its text is read by screen readers. Default: title, description, tags.
`canMove`	`(card: Readonly<KanbanCard>, to: Readonly<KanbanPosition>) => boolean`		Veto a move (keyboard moves skip refused columns; pointer drops show an invalid target). Locked cards and columns, and full columns under wipPolicy ‘block’, are always refused.
`moveCard`	`(move: KanbanCardMoveDetail, signal: AbortSignal) => void \| Promise<void>`		Save a move after it was applied. While it runs the card is aria-busy and cannot move again. A rejection or a timeout (requestTimeoutMs) moves the card back, removes the move from the history, announces the failure, and emits aui-move-error.
`wipPolicy`	`KanbanWipPolicy`	`'warn'`	‘warn’ marks columns over their limit (‘Over limit’ text and icon); ‘block’ also refuses moves into a column at its limit (moves within the column stay possible).
`virtualThreshold`	`number`	`'150'`	Cells with more cards than this (20..100000) scroll on their own and render only the cards in view (measured heights, spacers, aria-setsize/aria-posinset).
`requestTimeoutMs`	`number`	`'30000'`	moveCard timeout in milliseconds (100..600000).
`historyLimit`	`number`	`'50'`	Undo depth (0..500); 0 disables undo.
`headingLevel`	`number`	`'3'`	aria-level of column and swimlane headings (2..6).
`locale`	`string`	`'en-US'`	Numbers and messages.
`direction`	`Direction`	`'ltr'`	Swaps ArrowLeft/ArrowRight between columns.

Two-way bindings

Model	Type	Change output	Description
`[(cards)]`	`readonly KanbanCard[]`	`(cardsChange)`	Cards: { id (unique), columnId, laneId? (required with lanes), title, description?, tags? (chips), color? (1..8 accent stripe), locked? }. The order within a cell is the array order. Validated (KANBAN_OPTIONS). Replacing it clears the undo history and aborts pending saves.

Outputs

Output	Payload	Description
`(cardActivated)`	`KanbanCardActivateDetail`	Enter on a card, or a click (outside a single-pointer move). Re-emits `aui-card-activate`.
`(cardMoved)`	`KanbanCardMoveDetail`	Before a move is applied; preventDefault() keeps the card where it was. Re-emits `aui-card-move`.
`(moveError)`	`KanbanMoveErrorDetail`	moveCard rejected or timed out; the card is back where it was. Re-emits `aui-move-error`.
`(columnMoved)`	`KanbanColumnMoveDetail`	Before a column reorder is applied; preventDefault() keeps the order. Re-emits `aui-column-move`.
`(collapseChange)`	`KanbanCollapseChangeDetail`	A column or swimlane was collapsed or expanded. Re-emits `aui-collapse-change`.

Read-only state

Property	Type	Description
`canUndo`	`Signal<boolean>`	A move or column reorder can be undone.
`canRedo`	`Signal<boolean>`	An undone change can be redone.
`pending`	`Signal<string[]>`	Ids of cards whose move is being saved.

Methods

Call them through a viewChild query or a template reference.

Method	Description
`positionOf(id: string): KanbanPosition \| null \| undefined`	Column, swimlane (null without swimlanes), and index of a card.
`moveColumn(id: string, index: number): boolean \| undefined`	Move a column in the column order (undoable, emits aui-column-move).
`setCollapsed(kind: "column" \| "lane", id: string, collapsed: boolean): void`	Collapse or expand a column or swimlane (emits aui-collapse-change).
`focusCard(id: string): void`	Focus a card, expanding its column and swimlane and scrolling a virtual cell to it.
`undo(): boolean \| undefined`	Undo the last move or column reorder (saved through moveCard with reason ‘undo’). Refused while saves are pending.
`redo(): boolean \| undefined`	Redo the last undone change.

Templates

Customize rendering with AuiItem from @absoluteui/angular/templates.