Using DHTMLX Gantt Properties in Angular Gantt

This page documents the public wrapper surface of @dhtmlx/trial-angular-gantt and @dhx/angular-gantt.

Available Inputs

Input	Type	Description
tasks	any[]	Task collection rendered in the chart/grid. Required.
links	any[]	Dependency collection. Required.
resources	any[] | null	Resource dataset for resource layouts and resource API methods.
resourceAssignments	any[] | null	Resource assignment dataset.
baselines	any[] | null	Baseline dataset.
config	Partial<GanttConfigOptions> | null	Merged into gantt.config.
templates	AngularGanttTemplates | null	Merged into gantt.templates; template functions can return Angular template descriptors.
plugins	Record<string, any> | null	Plugin activation map (for example: critical_path, auto_scheduling).
calendars	Calendar[] | null	Working calendar definitions synchronized by id.
markers	Marker[] | null	Vertical timeline markers synchronized by id.
locale	string | null	Locale name passed to gantt.i18n.setLocale(...).
theme	string | null	Skin name passed to gantt.setSkin(...) when available.
data	AngularGanttDataConfig | null	Transport callbacks: load, save, batchSave.
events	AngularGanttEvents | null	Event-name to handler map for Gantt events.
customLightbox	CustomLightboxConfig | null	Replaces built-in lightbox with an Angular component.
groupTasks	any	Grouping config passed to gantt.groupBy(...); use false to disable.
filter	TaskFilter	A function used to filter Gantt tasks.
resourceFilter	ResourceFilter	Predicate for filtering rows in the configured resource datastore.

Outputs And Instance Access

(ready)

The wrapper emits ready once after initialization and initial sync.

Event payload shape:

{ instance: GanttStatic }

<dhx-gantt [tasks]="tasks" [links]="links" (ready)="onReady($event)"></dhx-gantt>

instance via @ViewChild

Use @ViewChild(DhxGanttComponent) when you need direct imperative access.

@ViewChild(DhxGanttComponent) ganttCmp?: DhxGanttComponent;

showToday(): void {
  this.ganttCmp?.instance?.showDate(new Date());
}

Data Collections And Synchronization

Use these inputs when Angular state or an RxJS store is your source of truth:

• tasks, links
• optional advanced stores: resources, resourceAssignments, baselines

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

Synchronization behavior summary:

• task/link updates are diff-based for routine changes,
• wrapper can switch to reset/re-parse when a diff is not safe/effective,
• resource/assignment/baseline stores are refreshed through Gantt datastores.

Use Data Binding and State Management Basics for model tradeoffs.

Config, Templates, Plugins, Theme, Locale

Use these inputs for declarative chart setup instead of imperative instance calls.

config = {
  scales: [
    { unit: 'year', step: 1, format: '%Y' },
    { unit: 'month', step: 1, format: '%F, %Y' },
    { unit: 'day', step: 1, format: '%d %M' },
  ],
  columns: [
    { name: 'text', tree: true, width: '*' },
    { name: 'start_date', align: 'center' },
    { name: 'duration', align: 'center' },
    { name: 'add', width: 44 },
  ],
};

templates = {
  task_text: (_start: Date, _end: Date, task: any) => `#${task.id}: ${task.text}`,
};

<dhx-gantt
  [config]="config"
  [templates]="templates"
  [plugins]="{ auto_scheduling: true }"
  [locale]="locale"
  [theme]="theme">
</dhx-gantt>

Runtime update behavior

• locale, theme, config, templates, and plugins can be updated after init.
• If config.layout changes shape (not just nested values), the wrapper may reinitialize the Gantt layout.
• Keep object identity stable when nothing changed to avoid unnecessary re-application.

events Input

Use a single event map instead of many Angular outputs.

import type { AngularGanttEvents } from '@dhtmlx/trial-angular-gantt';

events: AngularGanttEvents = {
  onTaskCreated: (task) => {
    console.log('created', task);
    return true;
  },
  onAfterTaskUpdate: (id, task) => {
    console.log('updated', id, task);
  },
  onBeforeLightbox: (taskId) => {
    console.log('before lightbox', taskId);
    return true;
  },
};

The wrapper accepts both a typed subset of common events and arbitrary event names through the same map.

Data Transport: load, save, batchSave

data input shape:

interface AngularGanttDataConfig {
  load?: string | ((gantt: any) => any | Promise<any>);
  save?: string | ((entity: string, action: string, data: any, id: string | number) => any);
  batchSave?: (changes: BatchChanges) => void;
}

load

• URL string -> wrapper calls gantt.load(url).
• Function -> wrapper calls it with the gantt instance and parses the returned sync/async dataset.

dataConfig = {
  load: async (gantt) => {
    const response = await fetch('/api/gantt');
    const dataset = await response.json();
    return dataset;
  },
};

load is intended for initial loading. The wrapper applies it once per component lifecycle.

save

Per-change callback or transport (wired through gantt.createDataProcessor(save)).

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

batchSave

Grouped callback for high-volume changes (auto-scheduling, bulk edits, chained updates).

import type { BatchChanges } from '@dhtmlx/trial-angular-gantt';

dataConfig = {
  batchSave: (changes: BatchChanges) => {
    if (changes.tasks?.length) {
      console.log('task changes', changes.tasks);
    }
  },
};

Queue behavior summary:

• near-term batching (small debounce window),
• coalescing create + update into one create with the latest payload,
• dropping create + delete pairs,
• stripping internal !nativeeditor_status from payloads.

customLightbox Input

Use customLightbox to replace the built-in Gantt lightbox with an Angular component.

import type { CustomLightboxConfig } from '@dhtmlx/trial-angular-gantt';

customLightbox: CustomLightboxConfig = {
  component: TaskEditorComponent,
  onSave: ({ id, task }) => console.log('saved', id, task),
  onCancel: () => console.log('cancel'),
  onDelete: (id) => console.log('delete', id),
};

The custom component instance receives these inputs from the wrapper:

• data ({ id, task })
• onSave(updatedTask)
• onCancel()
• onDelete()

Templates And Angular Components

Template functions can return regular strings/HTML (native Gantt behavior) or Angular component descriptors created with templateComponent(...).

import { templateComponent } from '@dhtmlx/trial-angular-gantt';

templates = {
  task_text: (_start: Date, _end: Date, task: any) =>
    templateComponent(TaskBadgeTemplateComponent, { task }),
};

config = {
  columns: [
    {
      name: 'status',
      label: templateComponent(HeaderFilterComponent, {
        currentFilter: this.currentFilter,
      }),
      template: (task: any) => templateComponent(StatusCellComponent, { task }),
    },
  ],
};

Use this for grid headers/cells, task text, scales, and other template-capable surfaces supported by Gantt.

Grouping, Resources, Filters, Calendars, Markers

These inputs are typically used in advanced timelines and resource views.

<dhx-gantt
  [tasks]="tasks"
  [links]="links"
  [resources]="resources"
  [resourceAssignments]="resourceAssignments"
  [groupTasks]="groupConfig"
  [filter]="taskFilter"
  [resourceFilter]="resourceFilter"
  [calendars]="calendars"
  [markers]="markers"
  [config]="config">
</dhx-gantt>

Notes:

• filter accepts a (task: any) => boolean function or null. When set, only tasks for which the function returns true are displayed. Set to null to show all tasks.
• resourceFilter works against the resource datastore configured by config.resource_store.
• groupTasks can be toggled with false or a grouping config object.
• calendars and markers are synchronized by id, so keep IDs stable.

Task filtering

Use the filter input to control which tasks are visible. The wrapper attaches an onBeforeTaskDisplay listener under the hood and triggers a re-render when the filter reference changes.

import type { TaskFilter } from '@dhtmlx/trial-angular-gantt';

taskFilter: TaskFilter = null;

showCompleted(): void {
  this.taskFilter = (task) => !!task.completed;
}

resetFilter(): void {
  this.taskFilter = null;
}

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

Keep a stable reference when the filter logic has not changed — the wrapper compares by identity and re-renders only when the reference changes.

Exported Types And Helpers

Useful public exports from the wrapper package:

• DhxGanttComponent
• DhxGanttModule
• templateComponent(...)
• isAngularTemplateRenderable(...)
• AngularGanttDataConfig
• AngularGanttEvents
• BatchChanges, DataCallbackChange
• SerializedTask, SerializedLink
• TaskFilter
• ResourceFilter
• GanttStatic
• CustomLightboxConfig
• Calendar, Marker

SerializedTask vs Task

The wrapper exports two task-related types:

• SerializedTask — use for data you own: store state, API responses, initial literals, batchSave payloads. Dates can be Date objects or strings matching date_format.
• Task (re-exported from @dhx/gantt) — for data gantt owns: inside event handlers, after gantt parses. Dates are Date objects. Has $-prefixed system properties.

SerializedLink is the link-side counterpart of SerializedTask.

Continue With

• Angular Gantt Overview
• Data Binding and State Management Basics
• RxJS State Management Tutorial
• dhtmlxGantt with Angular (Low-Level Integration)