Example of Self Reference Data in Angular Gantt Component

This sample demonstrates the way of binding self-referential flat data to the Gantt component.

1
Project Schedule
2/4/20253/24/202535 days64
2
Planning
2/4/20252/11/20256 days75
3
Plan timeline
2/4/20252/11/20256 days60
4
Plan budget
2/4/20252/11/20256 days90
5
Allocate resources
2/4/20252/11/20256 days75
6
Planning complete
2/11/20252/11/20250 days3FS,4FS,5FS0
7
Design
2/12/20252/18/20255 days85
8
Software Specification
2/12/20252/14/20253 days6FS60
9
Develop prototype
2/12/20252/14/20253 days6FS100
10
Get approval from customer
2/17/20252/18/20252 days9FS100
11
Design complete
2/18/20252/18/20250 days10FS0
12
Implementation
2/19/20253/4/202510 days75
13
Develop core modules
2/19/20252/25/20255 days11FS80
14
Integrate modules
2/26/20253/4/20255 days13FS70
15
Implementation complete
3/4/20253/4/20250 days14FS0
16
Testing
3/5/20253/13/20257 days44
17
Unit testing
3/5/20253/7/20253 days15FS50
18
Integration testing
3/10/20253/13/20254 days17FS40
19
Test report
3/13/20253/13/20250 days18FS0
20
Deployment
3/14/20253/19/20254 days25
21
Configure environment
3/14/20253/17/20252 days19FS30
22
Deploy application
3/18/20253/19/20252 days21FS20
23
Deployment verification
3/19/20253/19/20250 days22FS0
24
Client Review
3/20/20253/24/20253 days23FS10
25
Project Handover
3/24/20253/24/20250 days24FS0
Project Schedule
Planning
Plan timeline
Plan budget
Allocate resources
Planning complete
Design
Software Specification
Develop prototype
Get approval from customer
Design complete
Implementation
Develop core modules
Integrate modules
Implementation complete
Testing
Unit testing
Integration testing
Test report
Deployment
Configure environment
Deploy application
Deployment verification
Client Review
Project Handover
Description

Gantt can be bound either to local or remote data services. The dataSource property can be assigned either with the array of JavaScript objects or an instance of DataManager.

In this demo, the array of self-referential flat data with parentID is assigned as data source to the Gantt.

Gantt component features are segregated into individual feature-wise modules. To use a selection and markers, inject the SelectionService and DayMarkersService into the @NgModule.providers section respectively.


More information on the Essential® Angular Gantt Chart can be found in this documentation section.