Angular
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Getting started with Angular Kanban component

This section briefly explains how to create Kanban component and configure its available functionalities in Angular Environment.

Setup Angular Environment

You can use Angular CLI to setup your Angular applications. To install Angular CLI use the following command.

npm install -g @angular/cli

Create an Angular Application

Start a new Angular application using below Angular CLI command.

ng new my-app
cd my-app

Adding Syncfusion Kanban package

All the available Essential JS 2 packages are published in npmjs.com registry.

To install Kanban component, use the following command.

npm install @syncfusion/ej2-angular-kanban --save

The —save will instruct NPM to include the kanban package inside of the dependencies section of the package.json.

Registering Kanban Module

Import Kanban module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-kanban [src/app/app.module.ts].

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the KanbanModule for the Kanban component
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent }  from './app.component';

@NgModule({
  //declaration of ej2-angular-kanban module into NgModule
  imports:      [ BrowserModule, KanbanModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Adding CSS reference

Kanban CSS files are available in the ej2-angular-kanban package folder. This can be referenced in your application using the following code.

[src/styles/styles.css].

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-kanban/styles/material.css';

Initialize the Kanban

Modify the template in [src/app/app.component.ts] file to render the ej2-angular-kanban component.

[src/app/app.component.ts]

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  // specifies the template string for the Kanban component
  template: `<ejs-kanban>
            <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 { }

Now, run the application in the browser using the following command.

npm start

The output will display the kanban header.

Source
Preview
app.component.ts
app.module.ts
main.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<ejs-kanban>
                <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 { }
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        KanbanModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Populating cards

To populate the empty Kanban with cards, define the local JSON data or remote data using the dataSource property. To define dataSource, the mandatory fields in JSON object should be relevant to keyField. In the following example, you can see the cards defined with default fields such as ID, Summary, and Status.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
import { Component } from '@angular/core';
import { CardSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { kanbanData } from './datasource';

@Component({
  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 AppComponent {
    public data: Object[] = kanbanData;
    public cardSettings: CardSettingsModel = {
        contentField: 'Summary',
        headerField: 'Id'
    };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        KanbanModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
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
    }
];
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Enable swimlane

Swimlane can be enabled by mapping the fields swimlaneSettings.keyField to appropriate column name in dataSource. This enables the grouping of the cards based on the mapped column values.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
import { Component } from '@angular/core';
import { CardSettingsModel, SwimlaneSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { kanbanData } from './datasource';

@Component({
  selector: 'app-root',
  template: `<ejs-kanban keyField='Status' [dataSource]='data' [cardSettings]='cardSettings' [swimlaneSettings]='swimlaneSettings'>
                <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 data: Object[] = kanbanData;
    public cardSettings: CardSettingsModel = {
        contentField: 'Summary',
        headerField: 'Id'
    };
    public swimlaneSettings: SwimlaneSettingsModel = { keyField: 'Assignee' };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        KanbanModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
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
    }
];
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Previous
Next