DHTMLX Angular Gantt

DHTMLX Angular Gantt is a Angular wrapper for the DHTMLX Gantt library.

Render DHTMLX Gantt in Angular apps with a wrapper component. Pass tasks, links, and config as inputs. Handle edits through wrapper callbacks.

Important: this npm package is a trial build for evaluation only. Request a commercial evaluation and support access: https://dhtmlx.com/docs/products/dhtmlxGantt-for-Angular/download.shtml

<dhx-gantt [tasks]="tasks" [links]="links"></dhx-gantt>

Install

npm install @dhtmlx/trial-angular-gantt

Quick start

Import wrapper styles in src/styles.css:

@import "@dhtmlx/trial-angular-gantt/dist/angular-gantt.css";

html,
body {
  height: 100%;
  margin: 0;
}

app-root {
  display: block;
  height: 100vh;
}

Create src/app/gantt-chart.component.ts:

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

import { links, tasks } from './demo-data';

@Component({
  selector: 'app-gantt-chart',
  standalone: true,
  imports: [DhxGanttComponent],
  host: { style: 'display:block;height:100%;' },
  template: `
    <dhx-gantt
      style="display:block;height:100%;"
      [tasks]="tasks"
      [links]="links"
      [config]="config"
      [data]="dataConfig">
    </dhx-gantt>
  `,
})
export class GanttChartComponent {
  tasks = tasks;
  links = links;

  config = {
    date_format: '%Y-%m-%d %H:%i',
    columns: [
      { name: 'text', tree: true, width: '*' },
      { name: 'start_date', label: 'Start', align: 'center' },
      { name: 'duration', label: 'Duration', align: 'center' },
      { name: 'add', width: 44 },
    ],
  };

  dataConfig: AngularGanttDataConfig = {
    save: (entity, action, item, id) => {
      console.log('save', { entity, action, item, id });
    },
  };
}

Render it from src/app/app.component.ts:

import { Component } from '@angular/core';
import { GanttChartComponent } from './gantt-chart.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttChartComponent],
  template: `<app-gantt-chart></app-gantt-chart>`,
})
export class AppComponent {}

demo-data.ts should export tasks and links.

Features

• Angular wrapper component for DHTMLX Gantt
• Standalone and NgModule Angular app support
• TypeScript support
• Configurable grid columns and timeline scales
• Tasks and dependency links
• Auto scheduling and critical path
• Resource management and filtering
• Inline editing
• Task filtering
• Undo/redo
• Multi-task selection and drag-and-drop
• Export to PDF, PNG, Excel, iCal, and MS Project
• 32 locales
• Multiple skins/themes

Requirements

• Angular 14.x or newer

Complete guides

• https://docs.dhtmlx.com/gantt/integrations/angular/

License

DHTMLX Gantt for Angular v.9.1.4-beta1 Professional Evaluation

This software is covered by DHTMLX Evaluation License. Contact [email protected] to get a proprietary license. Usage without proper license is prohibited.

(c) XB Software

Useful links

• DHTMLX Angular Gantt product page
• DHTMLX JS Gantt product page
• Official documentation
• Online samples
• Video tutorials
• Export services
• List of available integrations
• Support forum

Follow us

• Read us on Medium

• Follow us on LinkedIn

• Follow us on X

• Like our page on Facebook