How To Add Kanban Board In Angular Application

Introduction

In this article, we will learn how to create a kanban board in a Angular 10 Application using Syncfusion kanban component.A kanban board is a tool designed for visualization of data.

According to official website,

A Kanban board is one of the tools that can be used to implement Kanban to manage work at a personal or organizational level. Kanban boards visually depict work at various stages of a process using cards to represent work items and columns to represent each stage of the process. Cards are moved from left to right to show progress and to help coordinate teams performing the work. A Kanban board may be divided into horizontal "swimlanes" representing different kinds of work or different teams performing the work.

Create a Angular Project

Create an Angular project by using the following command.

ng new Kanbandata

Now install Syncfusion kanban , To install Kanban and its dependent packages, use the following command.

npm install @syncfusion/ej2-angular-kanban

Now import Kanban module in app.module.ts file ,add the following code in this file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from "@angular/common/http";
import { AppComponent } from './app.component';
import { KanbanAllModule } from '@syncfusion/ej2-angular-kanban';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,KanbanAllModule,HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Now open app.component.ts file and add the following code,

import { Component, ViewChild } from '@angular/core';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, CardSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { HttpClient } from "@angular/common/http";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('kanbanObj') kanbanObj: KanbanComponent;
public cardSettings: CardSettingsModel = {
headerField: 'Id'
};
headerdata: any
BoradData1: Object;
constructor(private http: HttpClient) {
}
ngOnInit() {
this.http.get('https://localhost:44314/Api/EmployeeInfo/Getemployeeinfo').subscribe(result => {
this.BoradData1 = result;
console.log(this.BoradData1);
})
this.headerdata = [
{ text: 'Jaipur', key: 'Jaipur' },
{ text: 'Delhi', key: 'Delhi' },
{ text: 'Bangalore', key: 'Bangalore' },
{ text: 'Pune', key: 'Pune' },
]
}
}

Now open app.component.Html file and add the following code,

<div class="row" style="margin-top:10px;margin-bottom: 24px;">
<div class="col-sm-12 btn btn-success">
How To Add Kanban Board in Angular Application
</div>
</div>
<div class="control-section">
<div class="col-lg-12 content-wrapper">
<div id='container'>
<ejs-kanban #kanbanObj cssClass='kanban-swimlane' keyField='City' [dataSource]='BoradData1'
[cardSettings]='cardSettings'>
<e-columns>
<e-column *ngFor="let data of headerdata" headerText='{{data.text}}' keyField='{{data.key}}'
allowToggle='true'></e-column>
</e-columns>
<ng-template #cardSettingsTemplate let-data>
<div class="card" style="width:400px">
<div class="card-body">
<h6 class="card-title">{{data.Name}}</h6>
<p class="card-text">{{data.Tech}}</p>
<p class="card-text">{{data.Age}}</p>
</div>
</div>
</ng-template>
</ejs-kanban>
</div>
</div>
</div>

Now open app.component.css file and add the following css classes,

.card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 0px solid rgba(0,0,0,.125) !important;
border-radius: .25rem;
}
p {
margin-top: 0;
margin-bottom: 0rem !important
}
.kanban-transition .e-card-kanban-image {
height: 45px;
width: 45px;
margin-left: auto;
}
.kanban-transition .e-card-kanban-image img {
height: 100%;
width: 100%;
border-radius: 50%;
}
.kanban-transition .e-card .e-card-tag-field {
background: #ececec;
color: #6b6b6b;
margin-right: 5px;
line-height: 1.1;
font-size: 13px;
border-radius: 3px;
padding: 4px;
}
.kanban-transition .e-card-custom-footer {
display: flex;
padding: 0px 12px 12px;
line-height: 1;
height: 35px;
}
.kanban-transition .e-card td {
background-color: #fff;
}
.kanban-transition .e-card .e-card-content {
display: flex;
}
.kanban-transition .e-card .e-text {
width: fit-content;
}

Now install Bootstrap by using following command.

npm install bootstrap --save

Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line.

@import '~bootstrap/dist/css/bootstrap.min.css';

Create a database and table

Open SQL Server Management Studio, create a database named Employee and in this database, create a table. Give that table a name like Employeeinfo

CREATE TABLE [dbo].[EmployeeInfo](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](50) NULL,
[City] [nvarchar](50) NULL,
[Age] [nvarchar](50) NULL,
[Tech] [nvarchar](50) NULL,
CONSTRAINT [PK_EmployeeInfo] PRIMARY KEY CLUSTERED
(
[Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, OPTIMIZE_FOR_SEQUENTIAL_KEY = OFF) ON [PRIMARY]
) ON [PRIMARY]
GO

Create a Web API Project

Open Visual Studio and click on create a new project:

Now select the project and click on the Next button.

Now select the project name and project location and click on the Create button.

Choose the template as Web API.

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data

Click on the "ADO.NET Entity Data Model" option and click "Add".

Select EF Designer from the database and click the "Next" button.

Add the connection properties, select the database name on the next page, and click OK.

Check the "Table" checkbox. The internal options will be selected by default. Now, click the "Finish" button.

Right-click on the Controllers folder and add a new controller. Name it "Employeeinfo controller" and add the following namespace in the Employeeinfo controller.

using EmployeeInfo.Models;

Now create a method to Get data from the database.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using EmployeeInfo.Models;
namespace EmployeeInfo.Controllers
{
public class EmployeeInfoController : ApiController
{
EmployeeEntities DB = new EmployeeEntities();
[HttpGet]
public object Getemployeeinfo()
{
return DB.EmployeeInfoes.ToList();
}
}
}

Now, let's enable CORS. Go to Tools, open NuGet Package Manager, search for CORS, and install the "Microsoft.Asp.Net.WebApi.Cors" package. Open Webapiconfig.cs and add the following lines,

EnableCorsAttribute cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

Now go to vs code and run the project using the following command 'npm start'.

we can drag and drop data.

Summary

In this article, we learned how to create a kanban board in a Angular 10 Application.

3 Comments

Join the conversation! Your thoughts help the community grow.

Charlene Banks5y ago
Hey, great article! ! However, I'm trying to find the css for "kanban-swimlane"... it's not anywhere in the example... let me know if this is available somewhere else? Thanks so much for sharing your skills!
- Charlene Banks5y ago
  Never mind, found it! Had to add a bunch of styles to my src/styles/styles.css:
- Charlene Banks5y ago
  [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';