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.

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.

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