Angular/Quick start

Angular

This example runs from source. Open the repository to clone, build, and run it locally.

Angular

Quick start

Minimal Angular project that mounts a Gantt chart with tasks and links, ready to clone and run.

README.md
gantt-chart.component.ts
app.ts
demo-data.ts

# Angular Gantt Quick-Start

[![dhtmlx.com](https://img.shields.io/badge/made%20by-DHTMLX-blue)](https://dhtmlx.com/)

> Starter project showing how to use [DHTMLX Angular Gantt](https://dhtmlx.com/docs/products/dhtmlxGantt-for-Angular/) in an Angular App.

**Related tutorial**:
[https://docs.dhtmlx.com/gantt/integrations/angular/quick-start/](https://docs.dhtmlx.com/gantt/integrations/angular/quick-start/)

![Demo screenshot](./screenshot.png)


## How to start

### Online

[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/DHTMLX/angular-gantt-quick-start/)

### On the local host

Clone the repo and run

```bash
git clone https://github.com/dhtmlx/angular-gantt-quick-start.git
cd angular-gantt-quick-start
npm install
npm start
```

## Code example

The component allows simple declarative initialization:

```typescript
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](https://docs.dhtmlx.com/gantt/integrations/angular/) to find more.

## Project structure

```
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
```

## Want full-featured examples?

[Start your 30-day trial](https://dhtmlx.com/docs/products/dhtmlxGantt-for-Angular/download.shtml) to download the complete sample pack (auto-scheduling, resource histogram, etc.).

## Related demos

- [angular-gantt-rxjs-starter](https://github.com/DHTMLX/angular-gantt-rxjs-starter) — same Gantt, but wired to an RxJS state service with `BehaviorSubject`, `data.batchSave`, and snapshot-based undo/redo. Step up here when you need state management.

## License

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.

## Useful links

- [Learn about DHTMLX Angular Gantt](https://dhtmlx.com/docs/products/dhtmlxGantt-for-Angular/)
- [Learn about DHTMLX Gantt](https://dhtmlx.com/docs/products/dhtmlxGantt/)
- [Technical support](https://forum.dhtmlx.com/c/gantt)
- [Online documentation](https://docs.dhtmlx.com/gantt/integrations/angular/)

src/app/gantt-chart.component.ts View on GitHub

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 = {
    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 });
    },
  };
}

src/app/app.ts View on GitHub

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

@Component({
  selector: 'app-root',
  styleUrl: './app.css',
  imports: [GanttChartComponent],
  template: `<app-gantt-chart></app-gantt-chart>`,
})
export class App {
  protected readonly title = signal('angular-gantt-quick-start');
}

src/app/demo-data.ts View on GitHub

export const tasks = [
  {
    id: 1,
    text: 'Office itinerancy',
    type: 'project',
    start_date: new Date(2026, 1, 2).toISOString(),
    duration: 10,
    progress: 0.4,
    open: true,
    parent: 0,
  },
  {
    id: 2,
    text: 'Planning',
    start_date: new Date(2026, 1, 2).toISOString(),
    duration: 4,
    progress: 0.6,
    parent: 1,
  },
  {
    id: 3,
    text: 'Implementation',
    start_date: new Date(2026, 1, 6).toISOString(),
    duration: 5,
    progress: 0.2,
    parent: 1,
  },
];

export const links = [{ id: 1, source: 2, target: 3, type: '0' }];