Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

Kanban Board

The NgStarter Angular Kanban Board component lets you render a horizontal workflow board with status columns and draggable cards. Use ngs-kanban-board for tasks, issues, CRM deals, hiring pipelines, content workflows, support tickets, and other status-based boards where users drag items within a column or between columns. It includes examples for Kanban Board.

Kanban Board renders a horizontal workflow board with columns and draggable cards. Use it when users need to move items through statuses such as tasks, issues, CRM deals, hiring stages, content pipelines, support tickets, or any status-based workflow.

Pass columns with id, name, color, and items. Each item should include at least name and position. Render each card with a custom ngsKanbanItemDef template so the item body can use NgStarter components such as Avatar, Badge, Icon, Button, and other card content.

The board updates local arrays with CDK drag/drop helpers and emits events such as itemSorted, itemTransferred, itemDropped, itemClick, itemAdd, columnEdit, and columnDelete. The application is responsible for saving the new order, status, and business data to the backend.

Do not use Kanban Board for simple tables, static lists, dashboard widget layout, calendars, timelines, arbitrary drag-and-drop builders, or screens without real workflow/status columns. Use Table, DataView, List, Grid, calendar/timeline components, or a custom builder for those cases.