Features
Built using Angular Kanban component from DayPilot Pro for JavaScript
Displays a Kanban board with three custom columns/phases (Analysis/Draft/Testing)
Supports drag and drop moving of cards between Kanban columns
Customized Kanban card appearance (bar color)
Includes a trial version of DayPilot Pro for JavaScript (see License below)
License
Licensed for testing and evaluation purposes. Please see the license agreement included in the sample project. You can use the source code of the tutorial if you are a licensed user of DayPilot Pro for JavaScript.
Kanban Component Configurator
This project was generated using Kanban UI Builder - an online configurator that lets you customize the control appearance and download a ready-to-run Angular 5 project.
Project Initialization
The attached Angular Kanban project requires that you have Angular CLI environment ready:
node.js (including NPM package manager)
Angular CLI 1.5+
The project defines the dependencies in package.json file but the required modules are not included. You need to download the dependencies using npm:
npm install
When the required modules are ready (node_modules folder) you can run the project:
npm run start
Angular 5 Kanban Component
This is the main component that defines the Kanban board appearance and functionality.
The Kanban component properties are defined using config object. You can use this object to define additional properties and event handlers.
kanban.component.ts
import {Component, ViewChild, AfterViewInit} from "@angular/core";
import {DayPilot, DayPilotKanbanComponent} from "daypilot-pro-angular";
import {DataService} from "./data.service";{}
@Component({
selector: 'kanban-component',
template: `<daypilot-kanban [config]="config" #kanban></daypilot-kanban>`,
styles: [``]
})
export class KanbanComponent implements AfterViewInit {
@ViewChild("kanban")
kanban: DayPilotKanbanComponent;
config: any = {
columnWidthSpec: "Auto",
};
constructor(private ds: DataService) {
}
ngAfterViewInit(): void {
this.ds.getColumns().subscribe(result => this.config.columns = result);
this.ds.getCards().subscribe(result => this.config.cards = result);
}
}
Angular 5 Kanban Module
This module wraps the Kanban functionality. It includes the Kanban component (kanban.component.ts) and data service (data.service.tst) classes. It includes the dependencies (including DayPilot Pro Angular package) and export the customized KanbanComponent.
kanban.module.ts
import {DataService} from "./data.service";
import {FormsModule} from "@angular/forms";
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {KanbanComponent} from "./kanban.component";
import {DayPilotModule} from "daypilot-pro-angular";
import {HttpClientModule} from "@angular/common/http";
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
DayPilotModule
],
declarations: [
KanbanComponent
],
exports: [ KanbanComponent ],
providers: [ DataService ]
})
export class KanbanModule { }
Data Service
The data service defines the data source. In this sample project, the data (Kanban cards and columns) is defined statically. You can replace the data loading methods - getCards() and getColumns() - with an HTTP request.
data.service.ts
import {Injectable} from "@angular/core";
import {Observable} from "rxjs/Observable";
import {DayPilot} from "daypilot-pro-angular";
import {HttpClient} from "@angular/common/http";
@Injectable()
export class DataService {
cards: any[] = [
{id: 1, "name": "Task 1", column: "1", text: "This is a description of task #1."},
{id: 2, "name": "Task 2", column: "1", text: "This is a description of task #2.", barColor: "#1155CC"},
{id: 3, "name": "Task 3", column: "1", text: "This is a description of task #3.", barColor: "#999"},
{id: 4, "name": "Task 4", column: "1", text: "This is a description of task #4.", barColor: "#6AA84F"},
{id: 5, "name": "Task 5", column: "2", text: "This is a description of task #5.", barColor: "#F6B26B"},
];
columns: any[] = [
{name: "Analysis", id: "1"},
{name: "Draft", id: "2"},
{name: "Testing", id: "3"}
];
firstOfMonth(): DayPilot.Date {
return DayPilot.Date.today().firstDayOfMonth();
}
constructor(private http : HttpClient){
}
getCards(): Observable<any[]> {
// simulating an HTTP request
return new Observable(observer => {
setTimeout(() => {
observer.next(this.cards);
}, 200);
});
// return this.http.get("/api/cards");
}
getColumns(): Observable<any[]> {
// simulating an HTTP request
return new Observable(observer => {
setTimeout(() => {
observer.next(this.columns);
}, 200);
});
}
}