How can I help you?
Getting Started with Angular Gantt Chart component
6 Feb 202624 minutes to read
This guide demonstrates how to set up and configure the Syncfusion Angular Gantt Chart component, from initial installation through enabling core features like hierarchical task structures, resource allocation, critical path analysis, and interactive features like editing, sorting, and filtering.
Note: This guide supports Angular 21 and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the Angular version support matrix. Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.
Ready to streamline your Syncfusion® Angular development? Discover the full potential of Syncfusion® Angular components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. Explore Syncfusion® AI Coding Assistant
To get started quickly with Angular Gantt Chart using CLI and Schematics, you can check on this video:
Prerequisites
Ensure your development environment meets the System Requirements for Syncfusion® Angular UI Components.
Dependencies
The Angular Gantt Chart component relies on specific packages to render tasks, timelines, and interactive features. Below are the required dependencies:
|-- @syncfusion/ej2-angular-gantt (Main Gantt package)
|-- @syncfusion/ej2-angular-base (Angular base components)
|-- @syncfusion/ej2-gantt (Core Gantt functionality)
|-- @syncfusion/ej2-base (Base utilities and helpers)
|-- @syncfusion/ej2-data (Data management and binding)
|-- @syncfusion/ej2-popups (Dialog and popup components)
|-- @syncfusion/ej2-grids (Grid functionality for task list)
|-- @syncfusion/ej2-treegrid (Tree structure for hierarchical tasks)
|-- @syncfusion/ej2-calendars (Date picker and calendar components)
|-- @syncfusion/ej2-dropdowns (Dropdown components for editing)
|-- @syncfusion/ej2-inputs (Input components for task editing)
|-- @syncfusion/ej2-buttons (Toolbar button components)Install these dependencies using the appropriate npm command based on your Angular version.
Setup angular environment
A straightforward approach to beginning with Angular is to create a new application using the Angular CLI. Install Angular CLI globally with the following command:
npm install -g @angular/cliAngular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need information more information about the standalone architecture, refer to the Standalone Guide.
Installing a specific version
To install a particular version of Angular CLI, use:
npm install -g @angular/[email protected]Create a new application
With Angular CLI installed, execute this command to generate a new application:
ng new syncfusion-angular-app- This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS [ https://developer.mozilla.org/docs/Web/CSS ]
Sass (SCSS) [ https://sass-lang.com/documentation/syntax#scss ]
Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
Less [ http://lesscss.org ]- By default, a CSS-based application is created. Use SCSS if required:
ng new syncfusion-angular-app --style=scss- During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.
- Select the required AI tool or ‘none’ if you do not need any AI tool.
- Navigate to your newly created application directory:
cd syncfusion-angular-appNote: In Angular 19 and below, it uses
app.component.ts,app.component.html,app.component.cssetc. In Angular 20+, the CLI generates a simpler structure withsrc/app/app.ts,app.html, andapp.css(no.component.suffixes).
Adding Syncfusion® Angular packages
Syncfusion®’s Angular component packages are available on npmjs.com. To use Syncfusion® Angular components, install the necessary package.
This guide uses the Angular Gantt Chart Component for demonstration. Add the Angular Gantt Chart component with:
ng add @syncfusion/ej2-angular-ganttThis command will perform the following configurations:
- Add the
@syncfusion/ej2-angular-ganttpackage and peer dependencies to yourpackage.json. - Import the Gantt Chart component in your application.
- Register the default Syncfusion® Tailwind3 theme in
angular.json.
For more details on version compatibility, refer to the Version Compatibility section.
Syncfusion® offers two package structures for Angular components:
- Ivy library distribution package format
- Angular compatibility compiler (ngcc), which is Angular’s legacy compilation pipeline.
Syncfusion®’s latest Angular packages are provided as Ivy-compatible and suited for Angular 12 and above. To install the package, execute:ng add @syncfusion/ej2-angular-ganttFor applications not compiled with Ivy, use the
ngcctagged packages:The ngcc packages are still compatible with Angular CLI versions 15 and below. However, they may generate warnings suggesting the use of IVY compiled packages. Starting from Angular 16, support for the ngcc package has been completely removed. If you have further questions regarding ngcc compatibility, please refer to the following FAQ.
npm add @syncfusion/[email protected]
Import Syncfusion® CSS styles
Syncfusion® Angular component themes can be added in various ways: via CSS or SCSS styles from npm packages, CDN, CRG, or Theme Studio.
The Tailwind3 theme is added to your styles.css when you run ng add (this happens automatically by default).
To stylize only specific Syncfusion® components, import the necessary styles. For example, to style only the Gantt Chart component:
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-treegrid/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-gantt/styles/tailwind3.css';Ensure that the import order aligns with the component’s dependency sequence.
For using SCSS styles, refer to this guide.
Add Gantt Chart component
Modify the template in [src/app/app.ts] file to render the Gantt Chart component.
Add the Angular Gantt Chart by using <ejs-gantt> selector in template section of the app.component.ts file.
import { Component, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
@Component({
imports: [GanttModule],
standalone: true,
selector: 'app-root',
// specifies the template string for the Gantt Chart component
template: `<ejs-gantt></ejs-gantt>`
})
export class AppComponent implements OnInit {
ngOnInit(): void {}
}This basic setup renders an empty Gantt chart. Configure additional properties like dataSource and taskFields to populate tasks.
Bind data to Gantt
The Gantt Chart component binds to project data through the dataSource property, which accepts an array of JavaScript objects or a DataManager instance. The taskFields property maps data source fields to task attributes (e.g., id, name, startDate, duration).
The following example demonstrates binding hierarchical task data:
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The code defines a data source with parent and child tasks, mapping fields like TaskID to id and subtasks to child.
Inject feature modules
Enhance the Gantt Chart component by injecting feature modules to enable capabilities like editing, sorting, and filtering. Inject modules into the providers array of the root NgModule or component. Common modules include:
- EditService: Enables task editing via cells, dialogs, or taskbars.
- FilterService: Supports column-based menu filtering.
- SortService: Allows task sorting by column values.
- SelectionService: Enables row and cell selection.
- ToolbarService: Adds toolbar actions like Add, Edit, and Delete.
- DayMarkersService: Highlights specific days in the timeline.
- CriticalPathService: Identifies and highlights critical tasks.
The following example injects modules to enable editing, sorting, and toolbar features:
import { Component } from '@angular/core';
import { GanttModule , EditService, FilterService, SortService, ToolbarService } from '@syncfusion/ej2-angular-gantt';
@Component({
imports: [GanttModule],
standalone: true,
providers: [EditService, FilterService, SortService, ToolbarService],
selector: 'app-root',
template: `
<ejs-gantt [dataSource]="data" [taskFields]="taskFields" [toolbar]="toolbar" [allowFiltering]='true' [allowSorting]= 'true'>
</ejs-gantt>`
})
export class AppComponent {
public data: object[] = [];
public taskFields: object = {};
public toolbar: string[] = ['Add', 'Edit', 'Delete'];
}Injecting EditService enables task modifications, while ToolbarService adds interactive toolbar buttons. Omitting required modules disables corresponding features, leading to runtime limitations.
Configure timeline
The timelineSettings property customizes the Gantt chart’s timeline, defining time units (e.g., days, weeks) and formatting for the top and bottom tiers. Set projectStartDate and projectEndDate to establish the timeline’s range, or let the component calculate them from task data.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [timelineSettings]="timelineSettings"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public timelineSettings?: object;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.timelineSettings = {
topTier: {
format: 'MMM dd, yyyy',
unit: 'Week',
},
bottomTier: {
unit: 'Day',
},
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The code configures a two-tier timeline with weekly and daily views, ensuring clear visualization of task durations.
Enable toolbar
The toolbar property adds interactive buttons (e.g., Add, Edit, Delete, ExpandAll, CollapseAll) to the Gantt chart. Inject ToolbarService to enable this feature. The following example adds common toolbar actions:
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, ToolbarService, EditService, SelectionService, ToolbarItem, EditSettingsModel } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
providers: [ToolbarService, EditService, SelectionService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [editSettings]="editSettings" [toolbar]="toolbar"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public editSettings?: EditSettingsModel;
public toolbar?: ToolbarItem[];
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.editSettings = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The toolbar array specifies actions, and ToolbarService ensures their functionality. Missing ToolbarService prevents toolbar rendering.
Enable editing
Editing allows modification of tasks through cells, dialogs, taskbars, or dependency lines. Enable editing by setting editSettings.allowEditing and editSettings.allowTaskbarEditing to true and injecting EditService.
Cell editing
Set editSettings.mode to Auto for cell editing. Double-click a cell in the TreeGrid to edit task details. Inject EditService to enable this feature.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, EditService, EditSettingsModel } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
providers: [EditService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [editSettings]="editSettings" [columns]="columns" [toolbar]="toolbar"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public columns?: object[];
public toolbar?: string[];
public editSettings?: EditSettingsModel;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.editSettings = {
allowEditing: true,
mode: "Auto"
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '250' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
this.toolbar = ['Edit'];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The code enables cell editing, allowing inline updates to task fields like TaskName or Duration. Double-clicking on the chart side opens the edit dialog if mode is Auto.
Dialog editing
Set editSettings.mode to Dialog to edit tasks via a dialog. Double-click anywhere on the treegrid pane or chart pane to open the dialog.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, EditService, EditSettingsModel } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
providers: [EditService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [editSettings]="editSettings" [columns]="columns" [toolbar]="toolbar"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public columns?: object[];
public toolbar?: string[];
public editSettings?: EditSettingsModel;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.editSettings = {
allowEditing: true,
mode: "Dialog"
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '250' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
this.toolbar = ['Edit'];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The dialog provides a comprehensive interface for editing task properties, ensuring precise updates.
Taskbar editing
Enable taskbar editing by setting editSettings.allowTaskbarEditing to true. Drag or resize taskbars to adjust task start dates or durations.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, EditService, EditSettingsModel } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
providers: [EditService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [editSettings]="editSettings" [columns]="columns" [toolbar]="toolbar"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public columns?: object[];
public toolbar?: string[];
public editSettings?: EditSettingsModel;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.editSettings = {
allowTaskbarEditing: true
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '250' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
this.toolbar = ['Edit'];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Taskbar editing allows intuitive adjustments to task schedules directly on the chart.
Dependency editing
Enable dependency editing by setting editSettings.allowTaskbarEditing to true and mapping the dependency field in taskFields. Drag connector lines between taskbars to create or modify dependencies.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, EditService, EditSettingsModel } from '@syncfusion/ej2-angular-gantt';
@Component({
imports: [GanttModule],
providers: [EditService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [editSettings]="editSettings" [columns]="columns" [toolbar]="toolbar"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public columns?: object[];
public toolbar?: string[];
public editSettings?: EditSettingsModel;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "6SS", Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.editSettings = {
allowTaskbarEditing: true
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '250' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
this.toolbar = ['Edit'];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The code maps the Predecessor field to dependency, enabling visual dependency management.
Define task relationships
Task relationships (dependencies) define how tasks depend on each other, impacting scheduling. The Gantt Chart component supports four dependency types:
- Finish-to-Start (FS): The successor task starts after the predecessor finishes.
- Start-to-Start (SS): The successor task starts when the predecessor starts.
- Finish-to-Finish (FF): The successor task finishes when the predecessor finishes.
- Start-to-Finish (SF): The successor task finishes when the predecessor starts.
Map the dependency field in taskFields to enable relationships. The component validates dependencies during rendering and editing.
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { DayMarkersService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
@Component({
imports: [GanttModule],
providers: [DayMarkersService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "6SS", Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The code defines dependencies like 2FS to link tasks, ensuring accurate scheduling. Dependency validation prevents scheduling conflicts, such as circular dependencies.
Assign resources
Assign resources to tasks using the resources property, which accepts a collection of resource objects with fields like id, name, and unit. Map these fields using resourceFields.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [highlightWeekends]="true" [labelSettings]="labelSettings" [resourceFields]="resourceFields" [resources]="resources"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public resources?: object[];
public taskSettings?: object;
public labelSettings?: object;
public resourceFields?: object;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('04/02/2019'), Duration: 0, Progress: 50, resources: [1] },
{ TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2', Progress: 50, resources: [2, 3, 5] },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '4', Progress: 50, resources: [4] },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '6', resources: [4, 8], Progress: 50 },
{
TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: '7', resources: [12, 5]
}
]
}];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
resourceInfo: 'resources',
child: 'subtasks'
};
this.labelSettings = {
leftLabel: 'TaskName',
rightLabel: 'resources'
};
this.resources = [
{ resourceId: 1, resourceName: 'Martin Tamer' },
{ resourceId: 2, resourceName: 'Rose Fuller' },
{ resourceId: 3, resourceName: 'Margaret Buchanan' },
{ resourceId: 4, resourceName: 'Fuller King' },
{ resourceId: 5, resourceName: 'Davolio Fuller' },
{ resourceId: 6, resourceName: 'Van Jack' },
{ resourceId: 7, resourceName: 'Fuller Buchanan' },
{ resourceId: 8, resourceName: 'Jack Davolio' },
{ resourceId: 9, resourceName: 'Tamer Vinet' },
{ resourceId: 10, resourceName: 'Vinet Fuller' },
{ resourceId: 11, resourceName: 'Bergs Anton' },
{ resourceId: 12, resourceName: 'Construction Supervisor' }
];
this.resourceFields = {
id: 'resourceId',
name: 'resourceName'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Enable filtering
Filtering reduces visible tasks based on criteria, using menu filters for each column. Enable it by setting allowFiltering to true and injecting FilterService. Customize filtering with filterSettings.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, FilterService, ToolbarService, ToolbarItem } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
providers: [FilterService, ToolbarService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [allowFiltering]='true' [dataSource]="data" [taskFields]="taskSettings"[columns]="columns" [toolbar]="toolbar" [timelineSettings]="timelineSettings" [labelSettings]="labelSettings" [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate" [splitterSettings]="splitterSettings"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public columns?: object[];
public timelineSettings?: object;
public labelSettings?: object;
public projectStartDate?: Date;
public projectEndDate?: Date;
public toolbar?: ToolbarItem[];
public splitterSettings?: object;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
dependency: 'Predecessor',
child: 'subtasks'
};
this.columns = [
{ field: 'TaskName', headerText: 'Task Name', width: '250', clipMode: 'EllipsisWithTooltip' },
{ field: 'StartDate', headerText: 'Start Date' },
{ field: 'Duration', headerText: 'Duration' },
{ field: 'EndDate', headerText: 'End Date' },
{ field: 'Predecessor', headerText: 'Predecessor' }
];
this.timelineSettings = {
timelineUnitSize: 70,
topTier: {
format: 'MMM dd, yyyy',
unit: 'Day',
},
bottomTier: {
unit: 'Hour',
format: 'hh : mm a'
}
};
this.splitterSettings = {
columnIndex: 3
};
this.toolbar = ['Search'];
this.labelSettings = {
leftLabel: 'TaskName',
};
this.projectStartDate = new Date('07/16/1969 01:00:00 AM');
this.projectEndDate = new Date('07/25/1969');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The code enables menu filtering, allowing tasks to be filtered by columns like TaskName. Missing FilterService disables this feature.
Enable sorting
Sorting orders tasks by column values. Enable it by setting allowSorting to true and injecting SortService. Customize sorting with sortSettings.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, SortService } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
providers: [SortService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" [splitterSettings]="splitterSettings" [allowSorting]= 'true'></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public splitterSettings?: object;
public columns?: object[];
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.splitterSettings = {
columnIndex: 3
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '250' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The code enables sorting by columns like StartDate, enhancing task organization. Missing SortService prevents sorting functionality.
Define event markers
The eventMarkers property highlights important dates in the timeline with vertical lines and labels. Inject DayMarkersService and configure day and label for each marker. Invalid day values trigger the actionFailure event.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, DayMarkersService } from '@syncfusion/ej2-angular-gantt'
import { projectNewData } from './data';
@Component({
imports: [GanttModule],
providers: [DayMarkersService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [eventMarkers]="eventMarkers"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public eventMarkers?: object[];
public ngOnInit(): void {
this.data = projectNewData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.eventMarkers = [
{
day: new Date('04/09/2019'),
label: 'Research phase'
}, {
day: new Date('04/30/2019'),
label: 'Design phase'
}, {
day: new Date('05/23/2019'),
label: 'Production phase'
}, {
day: new Date('06/20/2019'),
label: 'Sales and marketing phase'
}
];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export let projectNewData: Object[] = [
{
TaskID: 1,
TaskName: 'Product Concept',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30 },
{ TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3 },
{
TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 2,
Predecessor: '2', Progress: 30
},
]
},
{
TaskID: 5, TaskName: 'Concept Approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4',
Indicators: [
{
'date': '04/10/2019',
'name': '#briefing',
'title': 'Product concept breifing',
}
]
},
{
TaskID: 6,
TaskName: 'Market Research',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 7,
TaskName: 'Demand Analysis',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4,
Predecessor: '5', Progress: 30
},
{ TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5' }
]
},
{
TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('04/04/2019'), Duration: 4,
Predecessor: '7, 8', Progress: 30
},
{ TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '9' },
{
TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: '10',
Indicators: [
{
'date': '04/20/2019',
'name': '#meeting',
'title': '1st board of directors meeting',
}
]
}
]
},
{
TaskID: 13,
TaskName: 'Product Design and Development',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '12'
},
{ TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '12' },
{ TaskID: 16, TaskName: 'Define Reliability', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, Predecessor: '15' },
{ TaskID: 17, TaskName: 'Identifying raw materials', StartDate: new Date('04/04/2019'), Duration: 2, Predecessor: '15' },
{
TaskID: 18,
TaskName: 'Define cost plan',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/04/2019'),
Duration: 2, Progress: 30, Predecessor: '17'
},
{ TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/04/2019'), Duration: 2, Predecessor: '17' }
]
},
{
TaskID: 21,
TaskName: 'Development of the final design',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/04/2019'),
Duration: 2, Progress: 30, Predecessor: '19,20'
},
{
TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('04/04/2019'),
Duration: 2, Predecessor: '22'
},
{ TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '23' }
]
},
{
TaskID: 25, TaskName: 'CAD Computer-aided design', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '24'
},
{ TaskID: 26, TaskName: 'CAM Computer-aided manufacturing', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '25' },
{
TaskID: 27, TaskName: 'Design complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: '26',
Indicators: [
{
'date': '05/18/2019',
'name': '#meeting',
'title': '2nd board of directors meeting',
}
]
}
]
},
{ TaskID: 28, TaskName: 'Prototype Testing', StartDate: new Date('04/04/2019'), Duration: 4, Progress: 30, Predecessor: '27' },
{ TaskID: 29, TaskName: 'Include feedback', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '28ss' },
{ TaskID: 30, TaskName: 'Manufacturing', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30, Predecessor: '28,29' },
{ TaskID: 31, TaskName: 'Assembling materials to finsihed goods', StartDate: new Date('04/04/2019'), Duration: 5, Predecessor: '30' },
{
TaskID: 32,
TaskName: 'Feedback and Testing',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 33, TaskName: 'Internal testing and feedback', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 45, Predecessor: '31'
},
{
TaskID: 34, TaskName: 'Customer testing and feedback', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 50, Predecessor: '33'
}
]
},
{
TaskID: 35,
TaskName: 'Final Product Development',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 36, TaskName: 'Important improvements', StartDate: new Date('04/04/2019'),
Duration: 4, Progress: 30, Predecessor: '34'
},
{
TaskID: 37, TaskName: 'Address any unforeseen issues', StartDate: new Date('04/04/2019'),
Duration: 4, Progress: 30, Predecessor: '36ss'
}
]
},
{
TaskID: 38,
TaskName: 'Final Product',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 39, TaskName: 'Branding product', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '37' },
{
TaskID: 40, TaskName: 'Marketing and presales', StartDate: new Date('04/04/2019'),
Duration: 4, Progress: 30, Predecessor: '39'
}
]
}
];The code adds markers for key project dates, enhancing timeline visibility. Missing DayMarkersService prevents marker rendering.
Handle Errors
The actionFailure event captures configuration errors, such as:
- Invalid
durationvalues (non-numeric). - Incorrect
dependencyformats (e.g., invalid predecessor types). - Invalid
offsetvalues in dependencies. - Missing
taskFieldsorresourceFieldsmappings. - Unmapped
isPrimaryKeyfor CRUD operations. - Invalid
timelineSettings.formatvalues. - Missing
hasChildMappingfor load-on-demand data. - Invalid
dayineventMarkers.
The following example demonstrates handling a missing isPrimaryKey configuration:
import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { GanttModule, ReorderService, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';
@Component({
imports: [GanttModule],
providers: [ReorderService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt #gantt height="430px" (actionFailure)="actionFailure($event)" [dataSource]="data" [allowReordering]='true'
[taskFields]="taskSettings" [treeColumnIndex]='1' [splitterSettings] = "splitterSettings">
<e-columns>
<e-column field='TaskName' headerText='Task Name' textAlign='Left' width=290></e-column>
<e-column field='StartDate' headerText='Start Date' textAlign='Right' width=120 ></e-column>
<e-column field='Duration' headerText='Duration' textAlign='Right' width=90 ></e-column>
<e-column field='Progress' headerText='Progress' textAlign='Right' width=120></e-column>
</e-columns>
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
@ViewChild('gantt') public gantt?: GanttComponent;
public data?: object[];
public taskSettings?: object;
public splitterSettings?: object;
public ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.splitterSettings = {
position: '50%'
};
}
public actionFailure(args: any) {
let span: HTMLElement = document.createElement('span');
((this.gantt?.element as HTMLElement).parentNode as ParentNode).insertBefore(span, (this.gantt as GanttComponent).element);
span.style.color = '#FF0000'
span.innerHTML = args.error[0];
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* TreeGrid DataSource
*/
export let GanttData: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
Alt text: Screenshot of Gantt chart displaying an error message from the actionFailure event due to missing isPrimaryKey configuration.
The code triggers actionFailure when isPrimaryKey is not set, displaying error details for debugging.
Run the Application
Use the following command to run the application in the browser.
ng serve --openThe output will appear as follows.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" ></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));The code integrates data binding, timeline settings, and toolbar features for a fully functional Gantt chart.