DHTMLX Gantt 10.0: New Scheduling Engine, Official Angular and Vue Wrappers, and Community Edition under MIT License

Build Powerful Gantt Charts
in Angular

Name: Angular Gantt Chart Component for Enterprise Apps | DHTMLX Gantt
Rating: 4.7 (47 reviews)

A complete, enterprise-grade Gantt component that brings DHTMLX's industry-proven scheduling engine natively into Angular apps.

Get free trial

View docs

npm install @dhtmlx/trial-angular-gantt

Click to copy

Get free trial

View docs

Copy npm command

Click to copy

Deployment covered

with every license.

100+ awards

No fees on the number of Angular

Gantt end-users in SaaS apps.

The Gantt Chart Trusted by 1M+ Developers,
Now for Angular

DHTMLX offers a reliable and feature-rich Angular Gantt component that helps teams build powerful
project management tools with Angular-native patterns.

Native Angular integration

DHTMLX Angular Gantt gives you a clean component API with typed inputs for tasks, links, config, templates, plugins, locale, theme, and data, so the chart fits naturally into modern Angular architectures. It supports both standalone and NgModule-based apps, making it easy to adopt in new products and existing enterprise codebases.

View the online sample

Advanced project planning and resource management

DHTMLX empowers project managers with the visibility they need to plan and adapt schedules with confidence. The Gantt chart’s auto-scheduling engine can calculate dates, handle constraints, and recalculate dependent tasks as plans change, making the component well-suited for large projects that require frequent updates.

DHTMLX Angular Gantt supports working calendars, baselines, critical path, and resource-aware layouts, so it covers real Angular planning software needs beyond a static timeline.

View the online sample

Flexible data management with RxJS support

The Angular Gantt component works naturally with Angular state as the source of truth. You can pass tasks, links, resources, and assignments as typed inputs, and the chart stays synchronized as your application state changes.

For RxJS-based applications, it also fits well into a centralized service or store, keeping Gantt data easy to manage across the app.

View the online sample

Easy customization with Angular components

DHTMLX Angular Gantt is a powerful Angular scheduling component that supports Angular‑powered templates, letting you embed real Angular components inside task labels, grid cells, column headers, and other template areas.

Beyond templating, you can configure grid columns, scale headers, filters, grouping rules, locale, and theme directly through the component API. Everything stays within your Angular workflow, without manual DOM manipulation, making it ideal for building advanced UI features and unique user experiences.

View the online sample

Try for free

Check all examples

Angular Gantt Chart Examples by DHTMLX Users

Angular Gantt chart for workflow management

An enterprise platform enhanced its process-building tools with Angular-based Gantt and Diagram components, providing teams with visual timelines and flowcharts for clearer planning.

DHTMLX Gantt for Enovatio Portal

Angular Gantt component for construction

Here is an example of a Gantt control in Angular built with DHTMLX for effective forecasting of job schedules in the construction industry from a US-based software company.

DHTMLX Gantt for Venplan

Space planning with DHTMLX Gantt and Angular

With Angular on the front end and .NET on the back, DHTMLX empowers a floor information modeling solution by French developers.

DHTMLX Gantt for ECSY

Show all stories

How to Create and Use Angular Gantt Chart

Click to copy

import { Component } from '@angular/core';
import {
  DhxGanttComponent,
  type AngularGanttDataConfig,
  type SerializedTask,
  type SerializedLink,
} from '@dhtmlx/trial-angular-gantt';

@Component({
  standalone: true,
  imports: [DhxGanttComponent],
  template: `<dhx-gantt [tasks]="tasks" [links]="links" [data]="dataConfig"></dhx-gantt>`,
})
export class GanttPageComponent {
  tasks: SerializedTask[] = [];
  links: SerializedLink[] = [];

  dataConfig: AngularGanttDataConfig = {
    save: (entity, action, item, id) => {
      if (entity === 'task') {
        if (action === 'create') this.tasks = [...this.tasks, item];
        if (action === 'update') this.tasks = this.tasks.map((t) => String(t.id) === String(id) ? { ...t, ...item } : t);
        if (action === 'delete') this.tasks = this.tasks.filter((t) => String(t.id) !== String(id));
      }

      if (entity === 'link') {
        if (action === 'create') this.links = [...this.links, item];
        if (action === 'update') this.links = this.links.map((l) => String(l.id) === String(id) ? { ...l, ...item } : l);
        if (action === 'delete') this.links = this.links.filter((l) => String(l.id) !== String(id));
      }
    },
  };
}

Click to copy

import { Injectable } from '@angular/core';
import type {
 BatchChanges,
 GanttConfigOptions,
 SerializedLink,
 SerializedTask,
 TaskId,
} from '@dhtmlx/trial-angular-gantt';
import { BehaviorSubject, distinctUntilChanged, map } from 'rxjs';
import { defaultGanttConfig, seedLinks, seedTasks } from '../data/gantt-seed.data';
import type { GanttConfig, ZoomLevelName } from '../gantt/gantt.types';
import { applyEntityChanges } from './apply-batch-changes';
import type { GanttState, HistorySnapshot } from './gantt-state.models';

function buildZoomConfig(config: GanttConfig, zoomLevel: ZoomLevelName): GanttConfig {
 return {
   ...config,
   zoom: { ...config.zoom, current: zoomLevel },
 };
}

function snapshotState(state: GanttState): HistorySnapshot {
 return {
   tasks: state.tasks.map((task) => ({ ...task })),
   links: state.links.map((link) => ({ ...link })),
   config: structuredClone(state.config),
 };
}

function idsMatch(left: TaskId, right: TaskId): boolean {
 return String(left) === String(right);
}

Click to copy

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DhxGanttComponent],
  template: `
    <div style="height: 600px;">
      <dhx-gantt
        [tasks]="tasks"
        [links]="links"
        [config]="config"
        [data]="dataConfig">
      </dhx-gantt>
    </div>
  `,
})
export class AppComponent {
  tasks = [
    { id: 1, text: 'Project', type: 'project', open: true, start_date: '2026-02-02 00:00', duration: 5, parent: 0 },
    { id: 2, text: 'Planning', start_date: '2026-02-02 00:00', duration: 2, parent: 1 },
  ];
...
  dataConfig: AngularGanttDataConfig = {
    save: (entity, action, data, id) => {
      console.log('[data.save]', entity, action, data, id);
    },
  };
}

Set up an Angular Gantt chart

You can integrate DHTMLX Angular Gantt into your application by installing the Angular Gantt npm package, importing the Gantt styles, and adding the Angular integration to your component. The setup is simple and fully Angular‑native: configuration, data, and options are passed through Angular inputs, so there is no need for a separate initialization process.

DHTMLX Angular Gantt supports modern Angular applications, including standalone components, and lets you work with typed tasks and links in a way that fits naturally into Angular projects. Once connected, the chart updates as your input data changes, making it a practical choice for dynamic project-planning interfaces.

How to create a Gantt chart in Angular

Click to copy

import { Component } from '@angular/core';
import {
  DhxGanttComponent,
  type AngularGanttDataConfig,
  type SerializedTask,
  type SerializedLink,
} from '@dhtmlx/trial-angular-gantt';

@Component({
  standalone: true,
  imports: [DhxGanttComponent],
  template: `<dhx-gantt [tasks]="tasks" [links]="links" [data]="dataConfig"></dhx-gantt>`,
})
export class GanttPageComponent {
  tasks: SerializedTask[] = [];
  links: SerializedLink[] = [];

  dataConfig: AngularGanttDataConfig = {
    save: (entity, action, item, id) => {
      if (entity === 'task') {
        if (action === 'create') this.tasks = [...this.tasks, item];
        if (action === 'update') this.tasks = this.tasks.map((t) => String(t.id) === String(id) ? { ...t, ...item } : t);
        if (action === 'delete') this.tasks = this.tasks.filter((t) => String(t.id) !== String(id));
      }

      if (entity === 'link') {
        if (action === 'create') this.links = [...this.links, item];
        if (action === 'update') this.links = this.links.map((l) => String(l.id) === String(id) ? { ...l, ...item } : l);
        if (action === 'delete') this.links = this.links.filter((l) => String(l.id) !== String(id));
      }
    },
  };
}

Configure Angular-native data flow

DHTMLX Angular Gantt chart supports two data ownership models: Angular state or a store as the source of truth, and Gantt as the source of truth for chart-centric or high-throughput pages.

For most Angular apps, the Angular-first model is the recommended starting point. It allows you to pass tasks, links, resources, and calendars as typed inputs, handle user changes through the data.save callback, and update your component state or store. This keeps project data predictable and keeps the Gantt chart synchronized with the rest of your Angular UI.

How to configure data bindings

Click to copy

import { Injectable } from '@angular/core';
import type {
 BatchChanges,
 GanttConfigOptions,
 SerializedLink,
 SerializedTask,
 TaskId,
} from '@dhtmlx/trial-angular-gantt';
import { BehaviorSubject, distinctUntilChanged, map } from 'rxjs';
import { defaultGanttConfig, seedLinks, seedTasks } from '../data/gantt-seed.data';
import type { GanttConfig, ZoomLevelName } from '../gantt/gantt.types';
import { applyEntityChanges } from './apply-batch-changes';
import type { GanttState, HistorySnapshot } from './gantt-state.models';

function buildZoomConfig(config: GanttConfig, zoomLevel: ZoomLevelName): GanttConfig {
 return {
   ...config,
   zoom: { ...config.zoom, current: zoomLevel },
 };
}

function snapshotState(state: GanttState): HistorySnapshot {
 return {
   tasks: state.tasks.map((task) => ({ ...task })),
   links: state.links.map((link) => ({ ...link })),
   config: structuredClone(state.config),
 };
}

function idsMatch(left: TaskId, right: TaskId): boolean {
 return String(left) === String(right);
}

Use RxJS service for state-driven Gantt management

Connect DHTMLX Angular Gantt to Angular stores via RxJS BehaviorSubject and AsyncPipe for reactive project data. Task and link updates flow smoothly from your app state, keeping the chart synchronized without manual refresh logic. This approach fits naturally into modern Angular workflows where project data changes frequently across multiple components. Developers can manage complex planning interfaces with cleaner code and predictable update behavior.

How to use Angular Gantt with RxJS

AI-Powered Angular Gantt Code Generation

DHTMLX official agent skills help AI assistants use Angular Gantt chart the right way, with guidance on setup, theming, data flow, and common pitfalls. They work alongside the DHTMLX Gantt API reference, which provides detailed method documentation, while the skills focus on integration patterns, decision points, and failure prevention.

The DHTMLX MCP server extends these capabilities by connecting AI assistants directly to the live DHTMLX documentation at runtime. When generating Angular Gantt code, the assistant can retrieve the latest information from the DHTMLX knowledge base and use it to produce API-accurate responses for configuration options, event handling, plugin activation, and more.

mcp endpoint
Claude Code
Cursor
Gemini CLI

                                                        https://docs.dhtmlx.com/mcp
                                                    
                                                        claude mcp add --transport http dhtmlx-mcp https://docs.dhtmlx.com/mcp
                                                    
                                                        {
  "mcpServers": {
    "dhtmlx-mcp": {
      "url": "https://docs.dhtmlx.com/mcp"
    }
  }
}
                                                
                                                        {
  "mcpServers": {
    "dhtmlx-mcp": {
      "url": "https://docs.dhtmlx.com/mcp"
    }
  }
}

AGENT SKILL

                                            npx skills add DHTMLX/skills --skill dhtmlx-angular-gantt

Free Trial

Explore enterprise-grade features of DHTMLX Angular Gantt chart with a 30-day trial.

Get started for free

Changelog

Full changelog

Samples & Docs

About DHTMLX Gantt

Documentation

Online examples

AI tools

Angular Gantt on GitHub

Forum

Why Use DHTMLX Gantt in Angular?

Advanced planning features

The component includes dependency‑driven auto‑scheduling, working calendars, critical path calculation, and resource management out of the box. DHTMLX Angular Gantt covers a wide range of real‑world planning scenarios without requiring custom scheduling logic, making it a powerful tool for development teams.

Built around the Angular component model

DHTMLX Angular Gantt exposes the full Gantt engine as a standard Angular component with typed inputs for tasks, links, config, plugins, templates, theme, and locale. It works seamlessly in both standalone and NgModule‑based apps, fits naturally into RxJS‑driven architectures, and keeps Angular state as the source of truth without manual DOM manipulation.

Deep customization with Angular components

You can embed custom Angular components into task templates, grid cells, and column headers, and replace the default task editor with a fully custom editor. Scales, filters, grouping, locale, and theme are all configured through the component API, so the Gantt chart matches your product’s design and UX requirements.

Full access to the DHTMLX Gantt API

Most functionality is configurable via Angular inputs, but the full DHTMLX Gantt API is still available when you need more advanced features. You can still use all the core methods and events documented in the Gantt API while staying within the Angular component model.

DHTMLX Gantt Licensing

Commercial

Total: $1599

Buy now

Enterprise

Total: $2999

Buy now

Ultimate

Total: $5999

Buy now

License Terms	Read License Agreement	Read License Agreement	Read License Agreement
Developers	5	20
Projects	1	5
Use in SaaS (unlimited end-users)	Upon request for a fee
Use in Salesforce
Source code
Perpetual distribution rights

Support Plan

Premium

Ultimate

Time Period	1 year	1 year	1 year
Updates	Major, minor, and maintenance updates	Major, minor, and maintenance updates	Major, minor, and maintenance updates Priority queue for bug fixing
Support requests	30	50
Response time	48h	48h	24h
Personal Account Manager

Functionality

PRO + 2 add-ons

PRO + 3 add-ons

PRO + 5 add-ons

20+ PRO features
React Gantt chart
Several Gantt charts on 1 page This feature enables creating and destroying instances of Gantt, what is especially common for Angular, React, and other frameworks.
Online export to PDF/PNG without watermark	Free for 1 year	Free for 1 year	Free for 3 years
Free local PDF/PNG export module
Free local module for MS Project export/import
Free Node.js Gantt server module

Commercial

$1599

Buy now

License Terms	Read License Agreement
Developers	5
Projects	1
Use in SaaS (unlimited end-users)	Upon request for a fee
Use in Salesforce
Source code
Perpetual distribution rights

Support Plan

Premium

Time Period	1 year
Updates	Major, minor, and maintenance updates
Support requests	30
Response time	48h
Personal Account Manager

Functionality

PRO + 2 add-ons

20+ PRO features
React Gantt chart
Several Gantt charts on 1 page This feature enables creating and destroying instances of Gantt, what is especially common for Angular, React, and other frameworks.
Online export to PDF/PNG without watermark	Free for 1 year
Free local PDF/PNG export module
Free local module for MS Project export/import
Free Node.js Gantt server module

Enterprise

$2999

Buy now

License Terms	Read License Agreement
Developers	20
Projects	5
Use in SaaS (unlimited end-users)
Use in Salesforce
Source code
Perpetual distribution rights

Support Plan

Premium

Time Period	1 year
Updates	Major, minor, and maintenance updates
Support requests	50
Response time	48h
Personal Account Manager

Functionality

PRO + 3 add-ons

20+ PRO features
React Gantt chart
Several Gantt charts on 1 page This feature enables creating and destroying instances of Gantt, what is especially common for Angular, React, and other frameworks.
Online export to PDF/PNG without watermark	Free for 1 year
Free local PDF/PNG export module
Free local module for MS Project export/import
Free Node.js Gantt server module

Ultimate

$5999

Buy now

License Terms	Read License Agreement
Developers
Projects
Use in SaaS (unlimited end-users)
Use in Salesforce
Source code
Perpetual distribution rights

Support Plan

Ultimate

Time Period	1 year
Updates	Major, minor, and maintenance updates Priority queue for bug fixing
Support requests
Response time	24h
Personal Account Manager

Functionality

PRO + 5 add-on

20+ PRO features
React Gantt chart
Several Gantt charts on 1 page This feature enables creating and destroying instances of Gantt, what is especially common for Angular, React, and other frameworks.
Online export to PDF/PNG without watermark	Free for 3 years
Free local PDF/PNG export module
Free local module for MS Project export/import
Free Node.js Gantt server module

DHTMLX Gantt for Angular:
Frequently Asked Questions

General

Features

Performance

Integrations

UI Customization and Styling

Export and Import

General

What is DHTMLX Gantt for Angular?

DHTMLX Gantt for Angular is the official Angular wrapper for DHTMLX Gantt, exposing the Gantt chart as a native Angular component (<dhx-gantt>) with declarative inputs for tasks, links, configuration, templates, plugins, themes, and localization. At the same time, developers retain access to the full DHTMLX Gantt engine and API.

Is DHTMLX Angular Gantt a native Angular component?

Yes, Angular Gantt is implemented as a native Angular component with typed inputs and outputs, Angular lifecycle support, and seamless integration with Angular applications. It works with both standalone components and traditional NgModule-based projects. Developers can also render Angular components directly inside Gantt templates using templateComponent(...).

What is DHTMLX Angular Gantt used for?

DHTMLX Gantt for Angular is used to build interactive project planning and scheduling interfaces inside Angular applications. It helps teams visualize tasks, dependencies, milestones, progress, resources, and timelines while supporting features such as filtering, grouping, custom editors, drag-and-drop interactions, and event handling.

Is DHTMLX Gantt for Angular free?

The evaluation package @dhtmlx/trial-angular-gantt is publicly available on npm for testing and evaluation purposes. The commercial package @dhx/angular-gantt requires a valid license and access to the private npm registry for production use.

How to install DHTMLX Gantt for Angular?

Install @dhtmlx/trial-angular-gantt via npm, import DhxGanttComponent, add the CSS to global styles, and use in standalone or NgModule apps. For a commercial use, install @dhx/angular-gantt from the private registry. Check the official documentation to learn more.

Can I connect Angular Gantt to a REST API?

DHTMLX Angular Gantt chart can load data from REST APIs using data.load and synchronize changes through data.save or data.batchSave. These APIs allow create, update, and delete operations to be sent directly to backend services while keeping the Angular application state synchronized.

Features

What features does DHTMLX Gantt provide for Angular developers?

DHTMLX Angular Gantt key features include:

Declarative Angular configuration and templates.
Incremental synchronization of tasks and links.
Resource management and assignments.
Baselines and project calendars.
Markers and grouping.
Auto-scheduling.
Custom lightboxes and editors.
Angular component rendering inside templates.
Full access to the underlying Gantt engine through the (ready) event.

Does the Angular Gantt support task dependencies?

Yes, the Angular Gantt chart component supports task dependencies. They are configured through the links input. The component supports all standard dependency types, including finish-to-start, start-to-start, finish-to-finish, and start-to-finish relationships.

Does it support auto-scheduling and dependency recalculation?

Auto-scheduling in the Angular Gantt chart can be enabled through the plugins input. Once enabled, the scheduling engine automatically recalculates dependent tasks whenever changes occur.

Can I edit tasks inline in Angular?

To configure inline editing in the Angular Gantt, use config.columns[].editor of the core DHTMLX Gantt editing config.

Can I calculate the critical path?

Yes, critical path calculation is available through the core Gantt plugins supported by the Angular wrapper.

Can I manage resources?

The Angular Gantt integration supports resources, resource assignments, resource filtering, and dedicated resource layouts through component inputs and configuration options.

Does it support baselines?

Baselines can be synchronized and managed through the Angular Gantt datastore APIs.

Performance

Is DHTMLX Gantt optimized for large datasets in Angular?

Yes. DHTMLX Gantt is optimized to handle large datasets efficiently. Smart rendering and dynamic loading ensure smooth operation even in enterprise-level applications with thousands of tasks. Task and link updates are applied incrementally (diff-based) for routine changes, avoiding full re-parses unless a structural change requires it.

Is it optimized for enterprise apps?

Yes. DHTMLX Angular Gantt supports enterprise workflows with advanced synchronization, large-scale project management, state management integration, custom rendering, and full API access.

Integrations

Can I integrate DHTMLX Gantt into an Angular application?

DHTMLX Gantt integrates natively with Angular through the official Angular wrapper package. The component provides typed APIs, Angular-friendly configuration, detailed documentation, and quick-start examples.

Can I integrate DHTMLX Angular Gantt with RxJS?

Yes. You can manage all Gantt data, including tasks, links, and settings, in a centralized RxJS BehaviorSubject or store, ensuring predictable state flow. Use data.batchSave for grouped updates from auto-scheduling or undo/redo. The RxJS state management tutorial walks through the full setup, including service shape and batch handling.

Can I use it with Angular services/stores?

The recommended architecture is to manage application state inside Angular services or state management libraries while synchronizing changes with the Gantt component.

UI Customization and Styling

Can I customize the appearance of the Angular Gantt chart?

You can apply a theme dynamically using the theme input. Eight built-in skins are available, including Material. Refine any skin with custom CSS or by overriding CSS variables. Since Angular's default style encapsulation may scope internal Gantt class selectors, keep Gantt CSS overrides in the global styles.css or set ViewEncapsulation.None of the component that defines them.

Can I customize task templates in Angular?

DHTMLX Angular Gantt chart component allows customizing task templates via templates input and templateComponent(...) for Angular components inside Gantt DOM.

Can I change timeline scales?

Timeline scales can be configured through config.scales, allowing developers to define custom day, week, month, quarter, or year views.

Can I override default rendering?

Rendering behavior can be customized using templates, custom lightboxes, and standard Gantt configuration APIs.

Can I configure working calendars?

Working calendars and non-working time can be configured through the calendars input.

Does it support localization?

DHTMLX Angular Gantt supports localization through the locale input and built-in locale packs.

Export and Import

Can I export data to PDF, Excel, or MS Project?

Yes, DHTMLX Gantt includes export options for PDF, PNG, MS Project, Excel, iCal, and Primavera P6. Online export services are available through the Gantt API. Standalone export modules enable local export without external dependencies — no watermarks and no per-export fees.