@bimetal/kanban-angular-components

The default Angular Kanban board for BIMETAL — a thin, standalone-component binding over the canonical @bimetal/kanban-headless controller. Behaviorally identical to the React and Vue boards: all interaction logic lives in the controller, the component only renders DOM, registers window listeners, hit-tests pointer drags, and normalizes keyboard events.

Features

• Real drag-and-drop — pointer drag (with a live drop-gap preview) and an accessible keyboard drag (grab with Space, move with arrows, drop with Space/Enter, cancel with Escape).
• Column management — inline rename, WIP limits, reorder, delete (cascades its cards).
• Cards — labels, title, description; create/edit dialog; custom bodies via a projected template.
• Filtering, undo, theming (darkMode).

Usage

import { Component } from '@angular/core';
import { Kanban } from '@bimetal/kanban-angular-components';
import { createKanbanStore } from '@bimetal/kanban-data';
import '@bimetal/kanban-angular-components/styles';

@Component({
  standalone: true,
  imports: [Kanban],
  template: `<bm-kanban [store]="store" boardId="b1" [darkMode]="true"></bm-kanban>`,
})
export class BoardPage {
  store = createKanbanStore();
}

Inputs

| Input | Type | Default | Notes | | --------------- | ----------------------------- | ------- | ------------------------------------------------------------ | | store | KanbanStore | — | Immutable after mount; remount (via @if/*ngIf) to swap. | | boardId | string | — | Which board this controller drives. | | config | KanbanConfigInput | — | Locale overrides; deep-merged with defaults. | | darkMode | boolean | false | Adds data-theme="dark". | | showFilter | boolean | true | Toggles the text filter. | | onError | (err: unknown) => void | — | Non-domain error channel (e.g. ConcurrencyError). | | renderCardTpl | TemplateRef<{ card: Card }> | — | Custom card body. Angular's equivalent of React/Vue renderCard. |

Custom card bodies

<bm-kanban [store]="store" boardId="b1" [renderCardTpl]="cardTpl"></bm-kanban>
<ng-template #cardTpl let-card>
  <strong>{{ card.title }}</strong>
</ng-template>

License

Apache-2.0 — see LICENSE.