Starter project showing how to use DHTMLX Angular Gantt in an Angular App.
Related tutorial: https://docs.dhtmlx.com/gantt/integrations/angular/quick-start/
Clone the repo and run
git clone https://github.com/dhtmlx/angular-gantt-quick-start.git
cd angular-gantt-quick-start
npm install
npm startThe component allows simple declarative initialization:
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 });
},
};
}Check the Online documentation to find more.
src/
app/
gantt-chart.component.ts <- <app-gantt-chart> component
demo-data.ts <- minimal task/link arrays
app.ts <- mounts GanttChartComponent
app.config.ts
styles.css
index.html
Start your 30-day trial to download the complete sample pack (auto-scheduling, resource histogram, etc.).
The code in this repository is released under the MIT License.
@dhx/angular-gantt and @dhtmlx/trial-angular-gantt are commercial libraries - use them under a valid license or evaluation agreement.