Angular Gantt

Angular Gantt is the official Angular wrapper for DHTMLX Gantt. It gives you an Angular component API for the chart while preserving access to the full Gantt engine.

AI-assisted development

If you use an AI coding assistant, the DHTMLX Angular Gantt agent skill can help it follow correct wrapper integration patterns - matching CSS imports, providing an explicit height chain, choosing a data ownership model, normalizing dates around data.save / data.batchSave, and mapping the app theme through Gantt CSS variables. For real-time API reference, connect the DHTMLX MCP server.

What You Get With The Wrapper

• Declarative inputs for tasks, links, config, templates, plugins, theme, and locale.
• Incremental synchronization for task/link updates with fallback re-parse for larger changes.
• Data transport callbacks via data.load, data.save, and data.batchSave.
• Event registration through the events map and lifecycle access through (ready).
• Angular component rendering inside Gantt templates via templateComponent(...).
• Support for advanced datasets and features (resources, resourceAssignments, baselines, calendars, markers, groupTasks, resourceFilter).

import { Component } from '@angular/core';
import { DhxGanttComponent } from '@dhtmlx/trial-angular-gantt';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DhxGanttComponent],
  template: `
    <div style={{height: '520px'}}>
      <dhx-gantt [tasks]="tasks" [links]="links"></dhx-gantt>
    </div>
  `,
})
export class AppComponent {
  tasks = [{ id: 1, text: 'Task', start_date: '2026-02-02 00:00', duration: 3, parent: 0 }];
  links = [];
}

If you want the full capability breakdown first, start with Angular Gantt Overview.

Recommended Learning Path

Follow this order if you are new to the wrapper:

1. Installation: choose the correct package channel and imports.
2. Quick Start: render your first chart in a standalone Angular app.
3. Configuration Reference: learn every input, output, and callback contract.
4. Data Binding and State Management Basics: choose your data ownership model.
5. RxJS State Management Tutorial: implement a store-driven pattern with BehaviorSubject and AsyncPipe.

Examples

Browse the public Angular Gantt examples for runnable demos of the wrapper:

• Live demo
• GitHub repository

Wrapper vs Low-Level JS Integration

Choose the integration path based on how much Angular integration you need:

• Choose the official wrapper (@dhtmlx/trial-angular-gantt or @dhx/angular-gantt) when you want Angular inputs/outputs, lifecycle integration, and wrapper-managed synchronization.
• Choose low-level JS integration only when you need fully manual control over the Gantt lifecycle and direct DOM integration.

Use dhtmlxGantt with Angular (Low-Level Integration) for the low-level path.

Data And State Management Entry Point

Start state architecture from the Angular state section:

• Data & State Management
• Data Binding and State Management Basics
• Using Angular Gantt with RxJS

Examples and evaluation resources

Browse the public Angular Gantt examples for runnable demos of the wrapper:

• Live demo
• GitHub repository

If you're evaluating Angular Gantt, the evaluation page provides access to technical support during the evaluation period. See Installation.