Overview of the Angular Gantt component

18 Oct 20258 minutes to read

The Angular Gantt component provides a Microsoft Project-like interface for scheduling and managing projects, with taskbars, dependencies, and timelines for visualizing task durations, relationships, and resource allocations. It displays project timelines with start and end dates, resource workloads, and task progress, highlighting milestones and delays. The component integrates with data sources via the dataSource property, supporting arrays of JSON objects or DataManager for remote APIs. Taskbars include ARIA labels for accessibility, and the UI adapts to responsive designs, though narrow screens may require scrolling for long timelines.

Key features

1. Data & Handling
Supports flexible data integration and efficient processing through structured field mapping, remote data connectivity, and performance-optimized rendering for large datasets.

  • Data Binding: The Gantt component supports both hierarchical and self-referential JSON structures. It also integrates seamlessly with remote data sources using the DataManager component, enabling RESTful API connections, OData, and other services. This flexibility allows dynamic data loading.
  • Task Field Mapping: Maps specific data fields to Gantt chart properties using the taskFields configuration. Required fields include id, name, and startDate, with optional fields like duration, progress, and parentID to define task hierarchy and scheduling.
  • Large Data: Optimized for large datasets using virtualization and load-on-demand techniques. Improves performance by rendering only visible rows and timeline cells during scroll operations.

2. Feature Modules: Provides modular support for enabling specific Gantt functionalities such as editing, filtering, sorting, selection, toolbar, and more through Angular feature modules.

3. Task Management
Provides comprehensive tools for creating, scheduling, and modifying tasks, including support for dependencies, constraints, milestones, and dynamic updates to reflect real-time project changes.

  • Tasks: Supports both scheduled and unscheduled tasks. Scheduled tasks include start and end dates, durations, and dependencies, with flexible duration units such as days, hours, or minutes. Unscheduled tasks can be defined with only one or none of these values, allowing placeholders or milestones to be represented without fixed dates. This setup enables precise control over task planning and visibility within the project timeline.
  • Milestones: Represents tasks with zero duration that require both a start and end date. Milestones are used to mark key events in the project and are included in the timeline, impacting scheduling and progress tracking.
  • Split Tasks : Allows tasks to be divided into segments with gaps, useful for modeling interruptions or phased work.
  • Editing: Task details can be modified using different methods such as cell editing, dialog forms, and taskbar adjustments. Tasks can be changed by entering new values or by dragging and resizing directly on the timeline.
  • Row Drag/Drop: Allows tasks to be reordered or moved to a different position within the task hierarchy using drag-and-drop actions.
  • Undo/Redo: Maintains a multi-level history of changes, allowing reversal or reapplication of recent actions.
  • Dependencies: Defines relationships between tasks to control their sequence and timing. Supports standard dependency types such as Finish-to-Start (FS), Start-to-Finish (SF), Start-to-Start (SS), and Finish-to-Finish (FF). These relationships help maintain logical task flow and ensure accurate scheduling.
  • Constraints: Applies scheduling restrictions like fixed start/end dates and conditional constraints to control task timing.
  • Critical Path: Identifies and highlights tasks that directly affect the overall project completion timeline, aiding in risk and delay analysis.
  • Auto-Scheduling: Automatically adjusts task start and end dates based on dependencies, constraints, working hours, holidays, and weekends. When enabled, parent tasks are scheduled according to the earliest start and latest end dates of their child tasks. Any updates to child tasks will automatically reflect in the parent task’s schedule and progress.

4. Timeline
Enables time-based planning through configurable views, scalable timelines, and working time settings, supporting precise scheduling across various time units and calendar structures.

  • Views: Provides task visualization from different perspectives, including project-focused and resource-focused views. Helps in analyzing task progress, resource usage, and allocation based on the selected context.
  • Timeline: Displays the project duration using time units such as minutes, days, or years. Supports single or dual-tier layouts, with each cell representing a specific time unit and format for scheduling tasks.
  • Work Hours: Defines daily working time ranges for accurate task scheduling.
  • Workweek:Configures which weekdays are considered working and which are non-working. This setup influences task planning and progress calculations.
  • Non-Working Time: Excludes specific hours or days from scheduling calculations.
  • Holidays: Defines non-working dates within the project timeline to reflect organizational calendars. These dates are excluded from task scheduling and progress calculations.
  • Timezone: Configures task scheduling based on a specific time zone. By default, it aligns with the system time zone, but can be set to follow any defined time zone to ensure accurate timeline alignment across different regions.
  • Zooming: Adjusts the timeline scale by modifying cell width and switching between time units. Supports viewing task schedules across various time ranges, from minute-level detail to long-term planning.

5. Visualization
Supports customizable visual elements for task representation, including taskbars, indicators, event markers, and timeline templates, enabling clear tracking and styling through themes and layout configurations.

  • Taskbars: Displays various task types including scheduled, unscheduled, split, and milestone. Supports visual enhancements like baselines, tooltips, and interactive drag-and-drop.
  • Event Markers: Adds vertical indicators to highlight specific dates such as milestones or deadlines.
  • Indicators: Shows visual cues like icons, flags, or badges to represent task status or priority.
  • Templates: Enables customization of taskbar tooltips using Angular ng-template, allowing display of specific task details in a user-defined format when hovering over tasks.
  • Timeline Template: Allows customization of timeline cells for enhanced visual representation.
  • Themes: Supports multiple design systems including Fluent, Tailwind, Bootstrap, and Material. Theme Studio enables branding and style customization.

6. Grid Setup
Defines the tabular structure of the Gantt chart, allowing customization of columns, rows, and selection behavior to support readable layouts and interactive data handling.

  • Columns: Defines the structure and layout of the grid by specifying which task fields are displayed. Supports reordering and resizing to allow users to adjust column positions and widths. Templates can be used to customize both cell and header content for advanced formatting. Includes support for WBS columns to represent hierarchical task numbering and frozen columns to keep key fields visible during horizontal scrolling. Column rendering is optimized for performance, and a column chooser is available to control visibility dynamically.
  • Rows: Allows customization of row appearance, including styling and height adjustments to suit layout and readability requirements.
  • Selection: Provides functionality for selecting rows or individual cells within the grid. Supports both single and multiple selection modes.

7. Resources
Handles resource planning and tracking through effort-based work mapping and allocation management, including detection of overallocation across personnel and assets.

  • Work Mapping: Maps effort units to tasks using the work field, allowing precise control over resource allocation and planning based on assigned hours or workload.
  • Allocation: Resources such as personnel, equipment, and materials can be assigned to tasks. If a resource is given more work than its available capacity for a day, it is marked as over allocation. This helps maintain balanced workloads and prevents scheduling conflicts.

8. Interaction
Enables user-driven control through filtering, toolbar actions, drag-and-drop, context menus, and keyboard navigation, supporting efficient task manipulation and grid operations.

  • Filtering: Helps organize and focus task data using column Menu filters, Excel-style filtering, and toolbar search. These options make it easier to view specific tasks or values within the Gantt chart.
  • Toolbar: Includes built-in and customizable command buttons for performing various actions related to task and chart management.
  • Drag and Drop: Allows tasks and rows to be moved interactively for reordering and rescheduling within the Gantt chart.
  • Context Menu: Enables quick access to task and column operations through right-click interaction. Menu options vary based on the selected element, such as task rows, column headers, or chart areas.
  • Keyboard: Enables efficient interaction through keyboard shortcuts for navigating tasks, editing values, and selecting rows or cells within the Gantt chart.

9. Performance
Optimizes rendering and responsiveness through virtual scrolling, loading animations, and read-only configurations for handling large datasets effectively.

  • Virtual Scrolling: Enhances rendering efficiency by loading only the visible rows during scroll operations, which significantly improves responsiveness when handling large datasets.
  • Shimmer Effect: Displays a loading animation while data is being fetched or rendered.

10. Globalization
Supports internationalization and accessibility through localization, right-to-left layout rendering, and compliance with accessibility standards like WCAG and ADA.

  • Localization: Automatically adjusts date formats, currencies, and textual labels based on the selected language and regional settings, using built-in internationalization support.
  • RTL: Supports right-to-left layout rendering for languages such as Arabic, ensuring proper alignment and readability across UI components.
  • Accessibility: Complies with WCAG 2.2, Section 508, and ADA standards. Includes ARIA attributes and screen reader compatibility.

11. Export & Events
Enables structured data export to Excel, CSV, and PDF formats, and provides event hooks for customizing chart behavior during rendering, editing, and user interactions.

  • Export:
    • Excel and CSV: Enables exporting Gantt chart data to Excel and CSV formats, simplifying structured data handling for reporting and offline analysis.
    • PDF: Allows exporting the chart as a PDF document, with support for single-page layout to generate compact and printable visual summaries.
  • Event Hooks: Provides lifecycle events that enable customization of chart behavior during rendering, editing, and user interactions (e.g., dataBound, taskbarEdited).

Industry application

 The Gantt component applies to various industries and project types:

  • Software development: Tracks sprint planning and feature development with dependencies.
  • Construction: Manages timelines for site preparation and building phases with resource allocation.
  • Manufacturing: Schedules production lines and supply chain tasks with progress tracking.
  • Marketing: Plans campaigns and content creation with milestone visualization.
  • Event planning: Coordinates vendor tasks and deadlines with dependency mapping.
  • Research and development: Organizes phases and deliverables with critical path analysis.

See also

  • API documentation: Comprehensive references here.
  • Sample browser: Live examples here.
  • Getting started guide: Step-by-step tutorial here.