Getting Started with the Angular Gantt Chart Component

A simple Angular sample demonstrating how to configure and render the Syncfusion Angular Gantt Chart with task dependencies and nested subtasks.

Project Overview

The sample focuses on setting up the Gantt chart within an Angular application and displaying project data that includes parent tasks and nested subtasks. It demonstrates commonly used configuration options such as timeline view mode, column definitions, progress tracking, and predecessor relationships for project planning scenarios.

Prerequisites

• Node.js (LTS or later)
• Angular CLI installed globally (npm install -g @angular/cli)

Installation

From the project root, install dependencies:

npm install

Run the application

Start the development server:

ng serve

Open the app at:

http://localhost:4200/

Features

• Syncfusion Gantt integration via @syncfusion/ej2-angular-gantt
• Weekly timeline view
• Custom columns and task mapping
• Nested subtasks and predecessors
• Sample data with progress and indicators

References

• Documentation: https://ej2.syncfusion.com/angular/documentation/gantt/getting-started/
• Online Demos: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/gantt/default