Search results

Drag and drop in Angular Kanban component

17 Sep 2021 / 9 minutes to read

All cards can be dragged and dropped across the columns or within the columns or swimlane row or kanban to an external source and vice versa.

The following drag and drop types are available in the Kanban board.

  • Internal drag and drop
  • Column drag and drop
  • Swimlane drag and drop
  • External drag and drop
  • Kanban to Kanban
  • Kanban to External source and vice versa.

Dropped card position varies based on the sortSettings property.

Internal drag and drop

Allows the user to drag and drop the cards within the kanban board. Based on this, we can categorize into two ways.

  • Column drag and drop
  • Swimlane drag and drop

Column drag and drop

By default, all cards can be dragged and dropped across the columns and within the columns. You cannot drag and drop the cards when disabling the allowDragAndDrop property.

You can prevent the drag or drop behavior of the particular column by disabling the allowDrag or allowDrop property. You can also control the flow of transition cards between the columns by using the transitionColumns property.

In the following example, disable the drag and drop behavior on the Kanban board.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
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' [allowDragAndDrop]='allowDragAndDrop'>
            <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 allowDragAndDrop: Boolean = false;
public cardSettings: CardSettingsModel = {
    contentField: 'Summary',
    headerField: 'Id'
};
}
Copied to clipboard
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 { }
Copied to clipboard
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
    }
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Swimlane drag and drop

By default, Swimlane allows drag and drop across the columns within the swimlane row. Kanban does not allow dragging the cards across the swimlane rows.

Enabling the dragAndDrop property allows you to drag the cards across the swimlane rows, which is specified inside the swimlaneSettings property.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
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', allowDragAndDrop: true };
}
Copied to clipboard
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 { }
Copied to clipboard
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
    }
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

External drag and drop

Allows the user to drag and drop the cards from one kanban to another kanban or Kanban to an external source and vice versa.

Kanban to kanban

Drag and drop the card from one kanban to another kanban and vice versa. This can be achieved by specifying the externalDropId property which is used to specify the id of the dropped kanban element and the dragStop event which is used to delete the card on dragged Kanban and add the card on dropped Kanban using the deleteCard and addCard public methods.

Before adding a card to dropped kanban, you can manually change the card data headerField when the same card data headerField is dropped to another Kanban.

In the following example, Drag the card from one Kanban and drop it into another kanban using the dragStop event. In this event, remove the card from the dragged Kanban by using the deleteCard public method and add the card to the dropped Kanban by using the addCard public method.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { closest } from '@syncfusion/ej2-base';
import { CardSettingsModel, DragEventArgs, KanbanComponent } from '@syncfusion/ej2-angular-kanban';
import { kanbanAData, kanbanBData } from './datasource';
@Component({
  selector: 'app-root',
  template: `<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
    <h4>Kanban A</h4>
    <ejs-kanban id='KanbanA' #KanbanA keyField='Status' [dataSource]='dataA' [externalDropId]='externalKanbanADropId'
      [cardSettings]='cardSettings' (dragStop)='onKanbanADragStop($event)'>
      <e-columns>
        <e-column headerText='To do' keyField='Open'></e-column>
        <e-column headerText='Done' keyField='Close'></e-column>
      </e-columns>
    </ejs-kanban>
  </div>
    <div class="col-sm-6">
    <h4>Kanban B</h4>
    <ejs-kanban id='KanbanB' #KanbanB keyField='Status' [dataSource]='dataB' [externalDropId]='externalKanbanBDropId'
      [cardSettings]='cardSettings' (dragStop)='onKanbanBDragStop($event)'>
      <e-columns>
        <e-column headerText='To do' keyField='Open'></e-column>
        <e-column headerText='Done' keyField='Close'></e-column>
      </e-columns>
    </ejs-kanban>
  </div>
  </div>
</div>`
})
export class AppComponent {
  @ViewChild('KanbanA')
public kanbanObjA: KanbanComponent;
@ViewChild('KanbanB')
public kanbanObjB: KanbanComponent;
public dataA: Object[] = kanbanAData;
public dataB: Object[] = kanbanBData;
public cardSettings: CardSettingsModel = {
    contentField: 'Summary',
    headerField: 'Id'
};
public externalKanbanADropId: string[] = ["#KanbanB"];
public externalKanbanBDropId: string[] = ["#KanbanA"];
onKanbanADragStop(args: DragEventArgs) {
  let kanbanBElement: Element = <Element>closest(args.event.target as Element, '#KanbanB');
  if (kanbanBElement) {
    this.kanbanObjA.deleteCard(args.data);
    this.kanbanObjB.addCard(args.data, args.dropIndex);
    args.cancel = true;
}
};
onKanbanBDragStop(args: DragEventArgs) {
  let kanbanAElement: Element = <Element>closest(args.event.target as Element, '#KanbanA');
  if (kanbanAElement) {
    this.kanbanObjB.deleteCard(args.data);
    this.kanbanObjA.addCard(args.data, args.dropIndex);
    args.cancel = true;
}
};
}
Copied to clipboard
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 { }
Copied to clipboard
export let kanbanAData: 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
    }
];


export let kanbanBData: Object[] = [
    {
        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
    }    
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Treeview to Kanban

Drag the card from the Kanban board and drop it to the Treeview component and vice versa.

In the following sample, remove the data from the Kanban board using the deleteCard public method and add to the Treeview component using the addNodes public method at Kanban dragStop event when dragging the card and dropping it to the Treeview component. Remove the data from Treeview using the removeNodes public method and add to Kanban board using the openDialog public method when dragging the list from the Treeview component and dropping it to the kanban board.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { closest } from '@syncfusion/ej2-base';
import { CardSettingsModel, DragEventArgs, KanbanComponent } from '@syncfusion/ej2-angular-kanban';
import { kanbanData, treeViewData } from './datasource';
import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
import { DragAndDropEventArgs } from '@syncfusion/ej2-navigations';
@Component({
  selector: 'app-root',
  template: `<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
    <h4>Kanban</h4>
    <ejs-kanban id='Kanban' #Kanban keyField='Status' [dataSource]='data' [externalDropId]='externalKanbanDropId'
      [cardSettings]='cardSettings' (dragStop)='onKanbanDragStop($event)'>
      <e-columns>
        <e-column headerText='To do' keyField='Open'></e-column>
          <e-column headerText='Done' keyField='Close'></e-column>
      </e-columns>
    </ejs-kanban>
  </div>
  <div class="col-md-6">
    <h4>TreeView</h4>
    <ejs-treeview id='TreeView' #TreeView [fields]='field' [allowDragAndDrop]='allowDragAndDrop' (nodeDragStop)="onTreeDragStop($event)">
        <ng-template #nodeTemplate="" let-data="">
            <div id="treelist">
              <div id="treeviewlist">{{data.Id}} - {{data.Status}}</div>
            </div>
        </ng-template>
    </ejs-treeview>
  </div>
 </div>
   </div>`
})
export class AppComponent {
  @ViewChild('Kanban')
  public kanbanObj: KanbanComponent;
  @ViewChild('TreeView')
  public treeObj: TreeViewComponent;
  public data: Object[] = kanbanData;
  public cardSettings: CardSettingsModel = {
contentField: 'Summary',
headerField: 'Id'
  };
  public externalKanbanDropId: string[] = ['#TreeView'];
  public field: Object = { dataSource: treeViewData, id: 'Id', text: 'Status' };
  public allowDragAndDrop: boolean = true;
  onKanbanDragStop(args: DragEventArgs) {
let treeViewElement: Element = <Element>closest(args.event.target as Element, '#TreeView');
if (treeViewElement) {
  this.kanbanObj.deleteCard(args.data);
  this.treeObj.addNodes(args.data);
  args.cancel = true;
}
  };
  onTreeDragStop(args: DragAndDropEventArgs) {
let kanbanElement: Element = <Element>closest(args.event.target as Element, '#Kanban');
if (kanbanElement) {
  let treeData: { [key: string]: Object }[] =
    this.treeObj.fields.dataSource as { [key: string]: Object }[];
  const filteredData: { [key: string]: Object }[] =
    treeData.filter((item: any) => item.Id === parseInt(args.draggedNodeData.id as string, 10));
  this.treeObj.removeNodes([args.draggedNodeData.id] as string[]);
  this.kanbanObj.openDialog('Add', filteredData[0]);
  args.cancel = true;
}
  };
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent } from './app.component';
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        KanbanModule,
        TreeViewModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
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': 'Andrew Fuller',
        'AssigneeName': 'Andrew',
        'RankId': 1
    },
    {
        'Id': 2,
        'Status': 'Close',
        'Summary': 'Improve application performance',
        'Type': 'Improvement',
        'Priority': 'Normal',
        'Tags': 'Improvement',
        'Estimate': 6,
        'Assignee': 'Andrew Fuller',
        'AssigneeName': 'Andrew',
        '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',
        'AssigneeName': 'Janet',
        'RankId': 2
    },
    {
        'Id': 4,
        'Status': 'Close',
        'Summary': 'Fix the issues reported in the IE browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'IE',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'AssigneeName': 'Janet',
        'RankId': 2
    },
    {
        'Id': 5,
        'Status': 'Close',
        'Summary': 'Fix the issues reported by the customer.',
        'Type': 'Bug',
        'Priority': 'Low',
        'Tags': 'Customer',
        'Estimate': '3.5',
        'Assignee': 'Steven walker',
        'AssigneeName': 'Steven',
        'RankId': 1
    }
];

export let treeViewData: Object[] = [
    {
        'Id': 11,
        'Status': 'Open',
        'Summary': 'Analyze the new requirements gathered from the customer.',
        'Type': 'Story',
        'Priority': 'Low',
        'Tags': 'Analyze,Customer',
        'Estimate': 3.5,
        'Assignee': 'Andrew Fuller',
        'AssigneeName': 'Andrew',
        'RankId': 1
    },
    {
        'Id': 12,
        'Status': 'Close',
        'Summary': 'Improve application performance',
        'Type': 'Improvement',
        'Priority': 'Normal',
        'Tags': 'Improvement',
        'Estimate': 6,
        'Assignee': 'Andrew Fuller',
        'AssigneeName': 'Andrew',
        'RankId': 1
    },
    {
        'Id': 13,
        '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',
        'AssigneeName': 'Janet',
        'RankId': 2
    },
    {
        'Id': 14,
        'Status': 'Close',
        'Summary': 'Fix the issues reported in the IE browser.',
        'Type': 'Bug',
        'Priority': 'Release Breaker',
        'Tags': 'IE',
        'Estimate': 2.5,
        'Assignee': 'Janet Leverling',
        'AssigneeName': 'Janet',
        'RankId': 2
    },
    {
        'Id': 15,
        'Status': 'Close',
        'Summary': 'Fix the issues reported by the customer.',
        'Type': 'Bug',
        'Priority': 'Low',
        'Tags': 'Customer',
        'Estimate': '3.5',
        'Assignee': 'Steven walker',
        'AssigneeName': 'Steven',
        'RankId': 1
    }
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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

Schedule to Kanban

Drag the card from the Kanban board and drop it to the Schedule component and vice versa.

In the following sample, remove the data from the Kanban board using the deleteCard public method and add to the schedule component using the addNodes public method at Kanban dragStop event when dragging the card and dropping it to the Treeview component. Remove the data from Treeview using the removeNodes public method and add to Kanban board using the addCard public method when dragging the list from the Treeview component and dropping it to the kanban board.

Source
Preview
app.component.ts
app.module.ts
datasource.ts
main.ts
Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { closest, removeClass, extend } from '@syncfusion/ej2-base';
import { CardSettingsModel, DragEventArgs, KanbanComponent } from '@syncfusion/ej2-angular-kanban';
import { kanbanData, scheduleData } from './datasource';
import {
EventSettingsModel, View, GroupModel, TimelineViewsService, TimelineMonthService,
ResizeService, WorkHoursModel, DragAndDropService, ResourceDetails, ScheduleComponent, ScheduleDragEventArgs
} from '@syncfusion/ej2-angular-schedule';
@Component({
  selector: 'app-root',
  template: `<div class="container-fluid">
  <div class="row">
    <div class="col-md-4" style="width: 30%">
    <h4>Kanban</h4>
    <ejs-kanban id='Kanban' #Kanban keyField='DepartmentName' [dataSource]='data' [externalDropId]='externalKanbanDropId'
      [cardSettings]='cardSettings' (dragStop)='onKanbanDragStop($event)'>
      <e-columns>
        <e-column headerText='GENERAL' keyField='GENERAL'></e-column>
      </e-columns>
    </ejs-kanban>
  </div>
  <div class="col-md-8" style="width: 70%">
    <h4>Schedule</h4>
    <ejs-schedule id='Schedule' #Schedule width='100%' height='650px' [group]="group" [currentView]="currentView" [selectedDate]="selectedDate" [workHours]="workHours" [eventSettings]="eventSettings" (dragStop)="scheduleDragStop($event)">
            <e-resources>
                <e-resource field='DepartmentID' title='Department' name='Departments' [dataSource]='departmentDataSource' textField='Text' idField='Id' colorField='Color'>
                </e-resource>
                <e-resource field='ConsultantID' title='Consultant' name='Consultants' [dataSource]='consultantDataSource' [allowMultiple]='allowMultiple' textField='Text' idField='Id' groupIDField="GroupId" colorField='Color'>
                </e-resource>
            </e-resources>
            <ng-template #resourceHeaderTemplate let-data>
                <div class="template-wrap">
                    <div class="specialist-category">
                        <div class="specialist-name">{{getConsultantName(data)}}</div>
                        <div class="specialist-designation">{{getConsultantDesignation(data)}}</div>
                    </div>
                </div>
            </ng-template>
            <e-views>
                <e-view option='TimelineDay'></e-view>
                <e-view option='TimelineMonth'></e-view>
            </e-views>
        </ejs-schedule>
   </div>
 </div>
   </div>`,
  providers: [TimelineViewsService, TimelineMonthService, ResizeService, DragAndDropService]
})
export class AppComponent {
  @ViewChild('Kanban')
  public kanbanObj: KanbanComponent;
  @ViewChild('Schedule')
  public scheduleObj: ScheduleComponent;
  public data: Object[] = kanbanData;
  public scheduleDataSource: Object[] = <Object[]>extend([], scheduleData, null, true);
  public cardSettings: CardSettingsModel = {
contentField: 'Name',
headerField: 'Id'
  };
  public externalKanbanDropId: string[] = ['#Schedule'];
  public selectedDate: Date = new Date(2018, 7, 1);
public currentView: View = 'TimelineDay';
public workHours: WorkHoursModel = { start: '08:00', end: '18:00' };
  public departmentDataSource: Object[] = [
    { Text: 'GENERAL', Id: 1, Color: '#bbdc00' },
    { Text: 'DENTAL', Id: 2, Color: '#9e5fff' }
];
public consultantDataSource: Object[] = [
    { Text: 'Alice', Id: 1, GroupId: 1, Color: '#bbdc00', Designation: 'Cardiologist' },
    { Text: 'Nancy', Id: 2, GroupId: 2, Color: '#9e5fff', Designation: 'Orthodontist' },
    { Text: 'Robert', Id: 3, GroupId: 1, Color: '#bbdc00', Designation: 'Optometrist' },
    { Text: 'Robson', Id: 4, GroupId: 2, Color: '#9e5fff', Designation: 'Periodontist' },
    { Text: 'Laura', Id: 5, GroupId: 1, Color: '#bbdc00', Designation: 'Orthopedic' },
    { Text: 'Margaret', Id: 6, GroupId: 2, Color: '#9e5fff', Designation: 'Endodontist' }
];
public group: GroupModel = { enableCompactView: false, resources: ['Departments', 'Consultants'] };
public allowMultiple: Boolean = false;
public eventSettings: EventSettingsModel = {
    dataSource: this.scheduleDataSource,
    fields: {
        subject: { title: 'Patient Name', name: 'Name' },
        startTime: { title: 'From', name: 'StartTime' },
        endTime: { title: 'To', name: 'EndTime' },
        description: { title: 'Reason', name: 'Description' }
    }
};

  getConsultantName(value: ResourceDetails): string {
    return (value as ResourceDetails).resourceData[(value as ResourceDetails).resource.textField] as string;
}

getConsultantStatus(value: ResourceDetails): boolean {
    let resourceName: string =
        (value as ResourceDetails).resourceData[(value as ResourceDetails).resource.textField] as string;
    if (resourceName === 'GENERAL' || resourceName === 'DENTAL') {
        return false;
    } else {
        return true;
    }
}

getConsultantDesignation(value: ResourceDetails): string {
    let resourceName: string =
        (value as ResourceDetails).resourceData[(value as ResourceDetails).resource.textField] as string;
    if (resourceName === 'GENERAL' || resourceName === 'DENTAL') {
        return '';
    } else {
        return (value as ResourceDetails).resourceData.Designation as string;
    }
}

getConsultantImageName(value: ResourceDetails): string {
    return this.getConsultantName(value).toLowerCase();
}

onKanbanDragStop(args: DragEventArgs) {
let scheduleElement: Element = <Element>closest(args.event.target as Element, '#Schedule');
    if (scheduleElement) {
        this.kanbanObj.deleteCard(args.data);
        this.scheduleObj.openEditor(args.data[0], 'Add', true);
        args.cancel = true;
    }
};
scheduleDragStop(args: ScheduleDragEventArgs) {
let kanbanElement: Element = <Element>closest(args.event.target as Element, '#Kanban');
    if (kanbanElement) {
        this.scheduleObj.deleteEvent(args.data.Id);
         removeClass([this.scheduleObj.element.querySelector('.e-selected-cell')], 'e-selected-cell');
         this.kanbanObj.openDialog('Add', args.data);
         args.cancel = true;
    }
};
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent } from './app.component';
import { ScheduleAllModule, RecurrenceEditorAllModule } from '@syncfusion/ej2-angular-schedule';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        KanbanModule,
        ScheduleAllModule,
        RecurrenceEditorAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
export let scheduleData: Object[] = [
    {
        "Id": 10,
        "Name": "David",
        "StartTime": "2018-08-01T03:30:00.000Z",
        "EndTime": "2018-08-01T04:30:00.000Z",
        "Description": "Health Checkup",
        "DepartmentID": 1,
        "ConsultantID": 1,
        "DepartmentName": "GENERAL"
    }, {
        "Id": 11,
        "Name": "John",
        "StartTime": "2018-08-01T05:00:00.000Z",
        "EndTime": "2018-08-01T06:00:00.000Z",
        "Description": "Tooth Erosion",
        "DepartmentID": 2,
        "ConsultantID": 2,
        "DepartmentName": "DENTAL"
    }, {
        "Id": 12,
        "Name": "Peter",
        "StartTime": "2018-08-01T06:30:00.000Z",
        "EndTime": "2018-08-01T07:30:00.000Z",
        "Description": "Eye and Spectacles Checkup",
        "DepartmentID": 1,
        "ConsultantID": 3,
        "DepartmentName": "GENERAL"
    }, {
        "Id": 13,
        "Name": "Starc",
        "StartTime": "2018-08-01T08:30:00.000Z",
        "EndTime": "2018-08-01T09:30:00.000Z",
        "Description": "Toothaches",
        "DepartmentID": 2,
        "ConsultantID": 4,
        "DepartmentName": "DENTAL"
    }, {
        "Id": 14,
        "Name": "James",
        "StartTime": "2018-08-01T04:30:00.000Z",
        "EndTime": "2018-08-01T05:30:00.000Z",
        "Description": "Surgery Appointment",
        "DepartmentID": 1,
        "ConsultantID": 5,
        "DepartmentName": "GENERAL"
    }, {
        "Id": 15,
        "Name": "Jercy",
        "StartTime": "2018-08-01T04:00:00.000Z",
        "EndTime": "2018-08-01T05:00:00.000Z",
        "Description": "Tooth Sensitivity",
        "DepartmentID": 2,
        "ConsultantID": 6,
        "DepartmentName": "DENTAL"
    }, {
        "Id": 16,
        "Name": "Albert",
        "StartTime": "2018-08-02T04:30:00.000Z",
        "EndTime": "2018-08-02T06:00:00.000Z",
        "Description": "Skin care treatment",
        "DepartmentID": 1,
        "ConsultantID": 7,
        "DepartmentName": "GENERAL"
    }, {
        "Id": 17,
        "Name": "Louis",
        "StartTime": "2018-08-02T07:00:00.000Z",
        "EndTime": "2018-08-02T08:15:00.000Z",
        "Description": "General Checkup",
        "DepartmentID": 1,
        "ConsultantID": 9,
        "DepartmentName": "GENERAL"
    }, {
        "Id": 18,
        "Name": "Williams",
        "StartTime": "2018-08-02T06:30:00.000Z",
        "EndTime": "2018-08-02T08:30:00.000Z",
        "Description": "Mouth Sores",
        "DepartmentID": 2,
        "ConsultantID": 10,
        "DepartmentName": "DENTAL"
    }, {
        "Id": 19,
        "Name": "David",
        "StartTime": "2018-08-02T11:00:00.000Z",
        "EndTime": "2018-08-02T12:45:00.000Z",
        "Description": "Eye checkup and Treatment",
        "DepartmentID": 1,
        "ConsultantID": 1,
        "DepartmentName": "GENERAL"
    }, {
        "Id": 20,
        "Name": "John",
        "StartTime": "2018-08-02T14:00:00.000Z",
        "EndTime": "2018-08-02T16:15:00.000Z",
        "Description": "Toothaches",
        "DepartmentID": 2,
        "ConsultantID": 2,
        "DepartmentName": "DENTAL"
    }, {
        "Id": 21,
        "Name": "Peter",
        "StartTime": "2018-08-03T12:00:00.000Z",
        "EndTime": "2018-08-03T14:00:00.000Z",
        "Description": "Surgery Treatment",
        "DepartmentID": 1,
        "ConsultantID": 3,
        "DepartmentName": "GENERAL"
    }, {
        "Id": 22,
        "Name": "Starc",
        "StartTime": "2018-08-04T13:00:00.000Z",
        "EndTime": "2018-08-04T16:00:00.000Z",
        "Description": "Tooth Decay",
        "DepartmentID": 2,
        "ConsultantID": 4,
        "DepartmentName": "DENTAL"
    }, {
        "Id": 23,
        "Name": "James",
        "StartTime": "2018-08-03T13:30:00.000Z",
        "EndTime": "2018-08-03T15:30:00.000Z",
        "Description": "General Checkup",
        "DepartmentID": 1,
        "ConsultantID": 5,
        "DepartmentName": "GENERAL"
    }, {
        "Id": 24,
        "Name": "Jercy",
        "StartTime": "2018-08-04T14:30:00.000Z",
        "EndTime": "2018-08-04T16:30:00.000Z",
        "Description": "Tooth Erosion",
        "DepartmentID": 2,
        "ConsultantID": 6,
        "DepartmentName": "DENTAL"
    }
];
export let kanbanData: Object[] = [
    {
        "Id": 101,
        "Name": "David",
        "StartTime": "2018-08-01T03:30:00.000Z",
        "EndTime": "2018-08-01T04:30:00.000Z",
        "Description": "Health Checkup",
        "DepartmentID": 1,
        "ConsultantID": 1,
        "DepartmentName": "GENERAL"
    }, {
        "Id": 111,
        "Name": "John",
        "StartTime": "2018-08-01T05:00:00.000Z",
        "EndTime": "2018-08-01T06:00:00.000Z",
        "Description": "Tooth Erosion",
        "DepartmentID": 2,
        "ConsultantID": 2,
        "DepartmentName": "DENTAL"
    }, {
        "Id": 121,
        "Name": "Peter",
        "StartTime": "2018-08-01T06:30:00.000Z",
        "EndTime": "2018-08-01T07:30:00.000Z",
        "Description": "Eye and Spectacles Checkup",
        "DepartmentID": 1,
        "ConsultantID": 3,
        "DepartmentName": "GENERAL"
    }, {
        "Id": 131,
        "Name": "Starc",
        "StartTime": "2018-08-01T08:30:00.000Z",
        "EndTime": "2018-08-01T09:30:00.000Z",
        "Description": "Toothaches",
        "DepartmentID": 2,
        "ConsultantID": 4,
        "DepartmentName": "DENTAL"
    }, {
        "Id": 141,
        "Name": "James",
        "StartTime": "2018-08-01T04:30:00.000Z",
        "EndTime": "2018-08-01T05:30:00.000Z",
        "Description": "Surgery Appointment",
        "DepartmentID": 1,
        "ConsultantID": 5,
        "DepartmentName": "GENERAL"
    }, {
        "Id": 151,
        "Name": "Jercy",
        "StartTime": "2018-08-01T04:00:00.000Z",
        "EndTime": "2018-08-01T05:00:00.000Z",
        "Description": "Tooth Sensitivity",
        "DepartmentID": 2,
        "ConsultantID": 6,
        "DepartmentName": "DENTAL"
    }, {
        "Id": 161,
        "Name": "Albert",
        "StartTime": "2018-08-02T04:30:00.000Z",
        "EndTime": "2018-08-02T06:00:00.000Z",
        "Description": "Skin care treatment",
        "DepartmentID": 1,
        "ConsultantID": 7,
        "DepartmentName": "GENERAL"
    }, {
        "Id": 171,
        "Name": "Louis",
        "StartTime": "2018-08-02T07:00:00.000Z",
        "EndTime": "2018-08-02T08:15:00.000Z",
        "Description": "General Checkup",
        "DepartmentID": 1,
        "ConsultantID": 9,
        "DepartmentName": "GENERAL"
    }, {
        "Id": 181,
        "Name": "Williams",
        "StartTime": "2018-08-02T06:30:00.000Z",
        "EndTime": "2018-08-02T08:30:00.000Z",
        "Description": "Mouth Sores",
        "DepartmentID": 2,
        "ConsultantID": 10,
        "DepartmentName": "DENTAL"
    }, {
        "Id": 191,
        "Name": "David",
        "StartTime": "2018-08-02T11:00:00.000Z",
        "EndTime": "2018-08-02T12:45:00.000Z",
        "Description": "Eye checkup and Treatment",
        "DepartmentID": 1,
        "ConsultantID": 1,
        "DepartmentName": "GENERAL"
    }, {
        "Id": 201,
        "Name": "John",
        "StartTime": "2018-08-02T14:00:00.000Z",
        "EndTime": "2018-08-02T16:15:00.000Z",
        "Description": "Toothaches",
        "DepartmentID": 2,
        "ConsultantID": 2,
        "DepartmentName": "DENTAL"
    }, {
        "Id": 211,
        "Name": "Peter",
        "StartTime": "2018-08-03T12:00:00.000Z",
        "EndTime": "2018-08-03T14:00:00.000Z",
        "Description": "Surgery Treatment",
        "DepartmentID": 1,
        "ConsultantID": 3,
        "DepartmentName": "GENERAL"
    }
];
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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