Getting Started with Angular Kanban Component

20 Jul 202624 minutes to read

The Syncfusion Angular Kanban component is a workflow visualization tool that helps to organize, manage, and track tasks across different stages of a process. This section outlines the steps to create a basic Kanban board in Angular and configure its core features.

Ready to streamline your Syncfusion^® Angular development? Discover the full potential of Syncfusion^® Angular components with Syncfusion^® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion^® CodeStudio and more. Explore Syncfusion^® AI Coding Assistant

Overview

The Kanban component consists of the following elements:

Cards: Represent tasks and are mapped to a dataSource via cardSettings.
Columns: Define workflow stages and are mapped using the keyField property.
Swimlanes: Group cards based on categories and are configured using swimlaneSettings.

Note: The example in this section uses only cards and columns. To enable swimlanes, see the Swimlanes documentation.

Setting Up the Angular Environment

Angular 21 requires Node.js 20.11+ (or 22.0+) and npm. Verify your versions before proceeding:

node -v
npm -v

Use the Angular CLI to create and manage Angular applications. Install Angular CLI using the following command:

npm install -g @angular/[email protected]

Create an Angular Application

Create a new Angular application using the Angular CLI:

ng new my-app

This command prompts for a few settings for the new project, such as whether to add Angular routing and which stylesheet format to use.

Initial_setup

By default, the application uses CSS for styling.

The CLI also displays an additional prompt asking whether to enable Server-Side Rendering (SSR) and Static Site Generation (SSG), as shown below:

Server_Side_Rendering_Setup

For this setup, select No, as the Kanban does not require SSR or SSG for basic configuration.

Next, a prompt for AI tooling support appears, as shown below:

AI_Tool_Setup

Any preferred option can be selected based on the development workflow or project needs.

Note: Angular CLI 17+ creates the root component file as src/app.ts. All file paths in this guide use this default naming.

Navigate to the project folder:

cd my-app

Adding the Syncfusion^® Kanban Package

All available Essential JS 2 packages are published in the npmjs.com registry. Use a package version that is compatible with Angular 21 (for example, @syncfusion/ej2-angular-kanban@^21 or later).

Install the Kanban component with the following command:

npm install @syncfusion/ej2-angular-kanban

Adding CSS References

The Kanban component requires specific CSS files for proper rendering. Syncfusion provides multiple themes for the Kanban component. For a complete list of available themes, refer to the theme packages.

To apply the tailwind 3 theme, install the corresponding theme package by using the following command:

npm install @syncfusion/ej2-tailwind3-theme

The installed theme package includes an index.css file that automatically imports all the required dependency styles. Import the following stylesheet into src/styles.css:

@import '../node_modules/@syncfusion/ej2-tailwind3-theme/styles/kanban/index.css';

Adding Kanban component

Update the src/app.ts file to render the Kanban component. Add the Angular Kanban by using the <ejs-kanban> selector in the template section. The CardSettingsModel type is imported from @syncfusion/ej2-kanban and describes the shape of cardSettings.

src/app.ts

import { Component } from '@angular/core';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { CardSettingsModel } from '@syncfusion/ej2-kanban';

@Component({
    imports: [
        KanbanModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-kanban [keyField]='keyField' [dataSource]='data' [cardSettings]='cardSettings'>
                <e-columns>
                    <e-column headerText='To do' keyField='Open'></e-column>
                    <e-column headerText='In Progress' keyField='InProgress'></e-column>
                    <e-column headerText='Testing' keyField='Testing'></e-column>
                    <e-column headerText='Done' keyField='Close'></e-column>
                </e-columns>
            </ejs-kanban>`
})
export class AppComponent {
    public keyField: string = 'Status';
    public data: Object[] = [
        {
            Id: 1,
            Status: 'Open',
            Summary: 'Analyze the new requirements gathered from the customer.',
            Type: 'Story',
            Priority: 'Low',
            Tags: 'Analyze,Customer',
            Estimate: 3.5,
            Assignee: 'Nancy Davloio',
            RankId: 1
        },
        {
            Id: 2,
            Status: 'InProgress',
            Summary: 'Improve application performance',
            Type: 'Improvement',
            Priority: 'Normal',
            Tags: 'Improvement',
            Estimate: 6,
            Assignee: 'Andrew Fuller',
            RankId: 1
        },
        {
            Id: 3,
            Status: 'Open',
            Summary: 'Arrange a web meeting with the customer to get new requirements.',
            Type: 'Others',
            Priority: 'Critical',
            Tags: 'Meeting',
            Estimate: 5.5,
            Assignee: 'Janet Leverling',
            RankId: 2
        },
        {
            Id: 4,
            Status: 'InProgress',
            Summary: 'Fix the issues reported in the IE browser.',
            Type: 'Bug',
            Priority: 'Release Breaker',
            Tags: 'IE',
            Estimate: 2.5,
            Assignee: 'Janet Leverling',
            RankId: 2
        },
        {
            Id: 5,
            Status: 'Testing',
            Summary: 'Fix the issues reported by the customer.',
            Type: 'Bug',
            Priority: 'Low',
            Tags: 'Customer',
            Estimate: '3.5',
            Assignee: 'Steven walker',
            RankId: 1
        },
    ];
    public cardSettings: CardSettingsModel = {
        contentField: 'Summary',
        headerField: 'Id'
    };
}

Running the Application

To run the Angular application, use the following command:

ng serve --open

This command builds the application and opens it in your default web browser. The Kanban board renders with the configured columns, and the cards are populated using default fields such as ID, Summary, and Status.

For reference, the complete sample used in this section is shown below. The data is extracted to a separate datasource.ts file to keep the component focused on configuration.

app.component.ts
main.ts
styles.css
datasource.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { KanbanModule } from '@syncfusion/ej2-angular-kanban'
import { Component } from '@angular/core';
import { CardSettingsModel } from '@syncfusion/ej2-kanban';
import { kanbanData } from './datasource';

@Component({
    imports: [
        KanbanModule
    ],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-kanban keyField='Status' [dataSource]='data' [cardSettings]='cardSettings'>
                <e-columns>
                  <e-column headerText='To do' keyField='Open'></e-column>
                  <e-column headerText='In Progress' keyField='InProgress'></e-column>
                  <e-column headerText='Testing' keyField='Testing'></e-column>
                  <e-column headerText='Done' keyField='Close'></e-column>
                </e-columns>
            </ejs-kanban>`
})
export class App {
    public data: Object[] = kanbanData;
    public cardSettings: CardSettingsModel = {
        contentField: 'Summary',
        headerField: 'Id'
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app.component';
import 'zone.js';
bootstrapApplication(App).catch((err) => console.error(err));
@import 'node_modules/@syncfusion/ej2-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-dropdowns/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-layouts/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-navigations/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-kanban/styles/material3.css';
export let kanbanData: Object[] = [
    {
        Id: 1,
        Status: 'Open',
        Summary: 'Analyze the new requirements gathered from the customer.',
        Type: 'Story',
        Priority: 'Low',
        Tags: 'Analyze,Customer',
        Estimate: 3.5,
        Assignee: 'Nancy Davloio',
        RankId: 1
    },
    {
        Id: 2,
        Status: 'InProgress',
        Summary: 'Improve application performance',
        Type: 'Improvement',
        Priority: 'Normal',
        Tags: 'Improvement',
        Estimate: 6,
        Assignee: 'Andrew Fuller',
        RankId: 1
    },
    {
        Id: 3,
        Status: 'Open',
        Summary: 'Arrange a web meeting with the customer to get new requirements.',
        Type: 'Others',
        Priority: 'Critical',
        Tags: 'Meeting',
        Estimate: 5.5,
        Assignee: 'Janet Leverling',
        RankId: 2
    },
    {
        Id: 4,
        Status: 'InProgress',
        Summary: 'Fix the issues reported in the IE browser.',
        Type: 'Bug',
        Priority: 'Release Breaker',
        Tags: 'IE',
        Estimate: 2.5,
        Assignee: 'Janet Leverling',
        RankId: 2
    },
    {
        Id: 5,
        Status: 'Testing',
        Summary: 'Fix the issues reported by the customer.',
        Type: 'Bug',
        Priority: 'Low',
        Tags: 'Customer',
        Estimate: '3.5',
        Assignee: 'Steven walker',
        RankId: 1
    },
    {
        Id: 6,
        Status: 'Close',
        Summary: 'Arrange a web meeting with the customer to get the login page requirements.',
        Type: 'Others',
        Priority: 'Low',
        Tags: 'Meeting',
        Estimate: 2,
        Assignee: 'Michael Suyama',
        RankId: 1
    },
    {
        Id: 7,
        Status: 'Validate',
        Summary: 'Validate new requirements',
        Type: 'Improvement',
        Priority: 'Low',
        Tags: 'Validation',
        Estimate: 1.5,
        Assignee: 'Robert King',
        RankId: 1
    },
    {
        Id: 8,
        Status: 'Close',
        Summary: 'Login page validation',
        Type: 'Story',
        Priority: 'Release Breaker',
        Tags: 'Validation,Fix',
        Estimate: 2.5,
        Assignee: 'Laura Callahan',
        RankId: 2
    },
    {
        Id: 9,
        Status: 'Testing',
        Summary: 'Fix the issues reported in Safari browser.',
        Type: 'Bug',
        Priority: 'Release Breaker',
        Tags: 'Fix,Safari',
        Estimate: 1.5,
        Assignee: 'Nancy Davloio',
        RankId: 2
    },
    {
        Id: 10,
        Status: 'Close',
        Summary: 'Test the application in the IE browser.',
        Type: 'Story',
        Priority: 'Low',
        Tags: 'Testing,IE',
        Estimate: 5.5,
        Assignee: 'Margaret hamilt',
        RankId: 3
    },
    {
        Id: 11,
        Status: 'Validate',
        Summary: 'Validate the issues reported by the customer.',
        Type: 'Story',
        Priority: 'High',
        Tags: 'Validation,Fix',
        Estimate: 1,
        Assignee: 'Steven walker',
        RankId: 1
    },
    {
        Id: 12,
        Status: 'Testing',
        Summary: 'Check Login page validation.',
        Type: 'Story',
        Priority: 'Release Breaker',
        Tags: 'Testing',
        Estimate: 0.5,
        Assignee: 'Michael Suyama',
        RankId: 3
    },
    {
        Id: 13,
        Status: 'Open',
        Summary: 'API improvements.',
        Type: 'Improvement',
        Priority: 'High',
        Tags: 'Grid,API',
        Estimate: 3.5,
        Assignee: 'Robert King',
        RankId: 3
    },
    {
        Id: 14,
        Status: 'InProgress',
        Summary: 'Add responsive support to application',
        Type: 'Epic',
        Priority: 'Critical',
        Tags: 'Responsive',
        Estimate: 6,
        Assignee: 'Laura Callahan',
        RankId: 3
    },
    {
        Id: 15,
        Status: 'Open',
        Summary: 'Show the retrieved data from the server in grid control.',
        Type: 'Story',
        Priority: 'High',
        Tags: 'Database,SQL',
        Estimate: 5.5,
        Assignee: 'Margaret hamilt',
        RankId: 4
    },
    {
        Id: 16,
        Status: 'InProgress',
        Summary: 'Fix cannot open user’s default database SQL error.',
        Priority: 'Critical',
        Type: 'Bug',
        Tags: 'Database,Sql2008',
        Estimate: 2.5,
        Assignee: 'Janet Leverling',
        RankId: 4
    },
    {
        Id: 17,
        Status: 'Testing',
        Summary: 'Fix the issues reported in data binding.',
        Type: 'Story',
        Priority: 'Normal',
        Tags: 'Databinding',
        Estimate: '3.5',
        Assignee: 'Janet Leverling',
        RankId: 4
    },
    {
        Id: 18,
        Status: 'Close',
        Summary: 'Analyze SQL server 2008 connection.',
        Type: 'Story',
        Priority: 'Release Breaker',
        Tags: 'Grid,Sql',
        Estimate: 2,
        Assignee: 'Andrew Fuller',
        RankId: 4
    },
    {
        Id: 19,
        Status: 'Validate',
        Summary: 'Validate databinding issues.',
        Type: 'Story',
        Priority: 'Low',
        Tags: 'Validation',
        Estimate: 1.5,
        Assignee: 'Margaret hamilt',
        RankId: 1
    },
    {
        Id: 20,
        Status: 'Close',
        Summary: 'Analyze grid control.',
        Type: 'Story',
        Priority: 'High',
        Tags: 'Analyze',
        Estimate: 2.5,
        Assignee: 'Margaret hamilt',
        RankId: 5
    },
    {
        Id: 21,
        Status: 'Close',
        Summary: 'Stored procedure for initial data binding of the grid.',
        Type: 'Others',
        Priority: 'Release Breaker',
        Tags: 'Databinding',
        Estimate: 1.5,
        Assignee: 'Steven walker',
        RankId: 6
    },
    {
        Id: 22,
        Status: 'Close',
        Summary: 'Analyze stored procedures.',
        Type: 'Story',
        Priority: 'Release Breaker',
        Tags: 'Procedures',
        Estimate: 5.5,
        Assignee: 'Janet Leverling',
        RankId: 7
    },
    {
        Id: 23,
        Status: 'Validate',
        Summary: 'Validate editing issues.',
        Type: 'Story',
        Priority: 'Critical',
        Tags: 'Editing',
        Estimate: 1,
        Assignee: 'Nancy Davloio',
        RankId: 1
    },
    {
        Id: 24,
        Status: 'Testing',
        Summary: 'Test editing functionality.',
        Type: 'Story',
        Priority: 'Normal',
        Tags: 'Editing,Test',
        Estimate: 0.5,
        Assignee: 'Nancy Davloio',
        RankId: 5
    },
    {
        Id: 25,
        Status: 'Open',
        Summary: 'Enhance editing functionality.',
        Type: 'Improvement',
        Priority: 'Low',
        Tags: 'Editing',
        Estimate: 3.5,
        Assignee: 'Andrew Fuller',
        RankId: 5
    }
];

Troubleshooting

Blank board or no cards — Confirm that each item’s Status matches one of the keyField values declared in the <e-columns> block (for example, Open, InProgress, Testing, Close).
'KanbanModule' is not a module or ejs-kanban is not recognized — Verify that @syncfusion/ej2-angular-kanban is installed and listed in package.json dependencies.
Missing styles (cards or layout not rendering correctly) — Re-check that all CSS imports were added to styles.css and that the dev server was restarted after editing the styles file.

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Getting Started with Angular Kanban Component

Overview

Setting Up the Angular Environment

Create an Angular Application

Adding the Syncfusion^® Kanban Package

Adding CSS References

Adding Kanban component

Running the Application

Troubleshooting

See also

Getting Started with Angular Kanban Component

Overview

Setting Up the Angular Environment

Create an Angular Application

Adding the Syncfusion® Kanban Package

Adding CSS References

Adding Kanban component

Running the Application

Troubleshooting

See also

Adding the Syncfusion^® Kanban Package