How to add a Kanban Board into an Angular 10 Application?

3 mins read

The Essential JS Angular Kanban board is used to provide user interface representation to manage multiple stages of work. Its feature set includes functionalities like Drag-and-drop, Data binding, Swimlane, Template, Workflow, Work-in-progress Limit, Tooltip, Stacked Headers and so on. In this knowledge base, we are going to provide details about how to easily integrate Syncfusion Angular Kanban in Angular 10.

Pre-requisites

Make sure that you have the compatible versions of Angular in your machine before starting to work on this project.

Node.js (latest version)
Angular 10
Angular CLI
Typescript 4+
.NET Core

Dependencies

The angular Kanban component is created from the Syncfusion ej2-angular-kanban package from npmjs, which is distributed in npm as @syncfusion scoped packages.

Create Core with Angular project

Step #1

Install the Angular CLI application on your machine.

npm install -g @angular/cli@10.2.3

Note:

If you would like to follow and run the application in Angular 6 or Angular 5 or Angular 4, you need to replace the CLI command version number with the corresponding angular version number.

npm install -g @angular/cli@<CLI VERSION>

Step #2

Open visual studio and choose File -> New -> Project in the visual studio menu bar.

New Project

Step #3:

Select the ASP.NET Core Web Application and change the application name, and then click OK.

Select Project

Step #4:

Select ASP.NET Core with Angular and click Create button. Now, the application is created.

Core with Angular

Step #5

Add the model folder and create the KanbanTask.cs file with the below code.

using System.Collections.Generic;
using System.Text.Json.Serialization;
 
namespace KanbanAngularApplication.Models
{
    public class KanbanTasks
    {
        public static List<KanbanTasks> TaskDetails = new List<KanbanTasks>();
        public KanbanTasks()
        {
        }
        public KanbanTasks(int Id, string Status, string Summary, string Assignee)
        {
            this.Id = Id;
            this.Status = Status;
            this.Summary = Summary;
            this.Assignee = Assignee;
        }
        public static List<KanbanTasks> GetKanbanTasks()
        {
            TaskDetails.Add(new KanbanTasks { Id = 1, Status = "Open", Summary = "Analyze the new requirements gathered from the customer.", Assignee = "Nancy Davloio" });
            TaskDetails.Add(new KanbanTasks { Id = 2, Status = "InProgress", Summary = "Improve application performance", Assignee = "Andrew Fuller" });
            TaskDetails.Add(new KanbanTasks { Id = 3, Status = "Close", Summary = "Arrange a web meeting with the customer to get new requirements.", Assignee = "Janet Leverling" });
            TaskDetails.Add(new KanbanTasks { Id = 4, Status = "InProgress", Summary = "Fix the issues reported in the IE browser.", Assignee = "Janet Leverling" });
            TaskDetails.Add(new KanbanTasks { Id = 5, Status = "Open", Summary = "Fix the issues reported by the customer.", Assignee = "Steven walker" });
            return TaskDetails;
        }
        [JsonPropertyName("Id")]
        public int Id { get; set; }
        [JsonPropertyName("Status")]
        public string Status { get; set; }
        [JsonPropertyName("Summary")]
        public string Summary { get; set; }
        [JsonPropertyName("Assignee")]
        public string Assignee { get; set; }
    }
}

Step #6

Right-click the controller folder from solution explorer and navigate Add -> Controller.

Controller

Step #7

Select API Controller - Empty under API category and click Add button.

API Controller

Step #8

Provide the controller name and add the controller page.

Controller name

Step #9

Add the model namespace and get the data from models at controller page.

KanbanController.cs

using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Linq;
using KanbanAngularApplication.Models;
 
namespace KanbanAngularApplication.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class KanbanController : ControllerBase
    {
        // GET: api/<KanbanController>
        [HttpGet]
        public List<KanbanTasks> Get()
        {
            List<KanbanTasks> data = KanbanTasks.GetKanbanTasks().ToList();
            return data;
        }
    }
}

Installing Syncfusion Kanban packages

Navigate to the ClientApp folder and install the npm using the following commands.

cd ClientApp

npm install

Install the ej2-angular-kanban package through the npm install command.

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

Adding angular kanban component

You can add the Angular Kanban component by using the ejs-kanban directive and the attributes within the tag allows you to define other functionalities.

Step #1

Import the Kanban module into the Angular application(app.module.ts) from the ej2-angular-kanban package.

app.module.ts

import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
……
@NgModule({
  ……
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    KanbanModule,
],
})
export class AppModule { }

Step #2

Add the below angular Kanban styles in 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';

Step #3

Add the angular Kanban component code.

home.component.html

<ejs-kanban keyField='Status' [dataSource]='KanbanData' [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='Done' keyField='Close'></e-column>
  </e-columns>
</ejs-kanban>

home.component.ts

import { Component } from '@angular/core';
import { CardSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { HttpClient } from "@angular/common/http";
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  public cardSettings: CardSettingsModel = {
    headerField: 'Id',
    contentField: 'Summary'
  };
  KanbanData: Object;
  constructor(private http: HttpClient) { }
  ngOnInit() {
    this.http.get('https://localhost:44335/api/Kanban/').subscribe(result => {
      this.KanbanData = result;
    })
  }  
}

Step #4

Now, Run the application. It will render the output like the below image.

Kanban Sample

Find the ASP.NET Core with Angular Kanban component in this sample.

Summary

Refer to our documentation and online samples for more features. If you have any queries, please let us know in the comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!

Did you find this information helpful?

Yes

Comments (0)