ngx-gantt

Use the GANTT_GLOBAL_CONFIG injection token to set application-level defaults for the Gantt component. This configuration controls internationalization (locale), date/time settings (timezone, week start), dependency link appearance, and visual styling (colors, heights, themes).

interface GanttGlobalConfig {
  locale?: GanttI18nLocale | string;
  dateOptions?: {
    timeZone?: string;
    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
  };
  linkOptions?: {
    dependencyTypes?: GanttLinkType[];
    showArrow?: boolean;
    lineType?: 'curve' | 'straight';
  };
  styleOptions?: {
    primaryColor?: string;
    headerHeight?: number;
    rowHeight?: number;
    barHeight?: number;
    defaultTheme?: string;
    themes?: Record<string, any>;
  };
}

To use ngx-gantt effectively, you must understand its three foundational pillars:

1. Data Model: Defines how task data is structured and represented using types like GanttItem and GanttGroup.
2. View System: Manages how the Gantt chart is displayed, including switching between different view types and configuring ViewOptions.
3. Time Handling: Governs how the component parses, formats, and operates on time, including timezone management and GanttDate operations.

Tree Mode uses a hierarchical structure where tasks contain a children array of other GanttItem objects. This allows for nested sub-tasks.

Example Implementation:

const items: GanttItem[] = [
  {
    id: '1',
    title: 'Project Kickoff',
    start: 1627729997,
    end: 1633345997,
    children: [
      {
        id: '1-1',
        title: 'Requirements Analysis',
        start: 1627729997,
        end: 1628421197,
        children: [
          { id: '1-1-1', title: 'Requirements Research', start: 1627729997, end: 1627902797 }
        ]
      },
      {
        id: '1-2',
        title: 'Technology Selection',
        start: 1628507597,
        end: 1630667597
      }
    ]
  }
];

When the built-in 6 view types do not meet your requirements (e.g., you need special time granularity like biweekly/bimonthly views or custom time range calculation logic), you can create a custom view by extending the GanttView abstract class.

Note: If you only need to adjust view styles, use CSS. If you only need to adjust time formats, use viewOptions.tickFormats instead of implementing a custom view.

import { GanttView } from '@worktile/gantt';

export class MyCustomView extends GanttView {
  override viewType = 'my-custom-type';
  // Implement required methods like rangeStartOf, rangeEndOf, getPeriodWidth, etc.
}

ngx-gantt uses the OnPush change detection strategy. To trigger view updates after modifying data (e.g., in a dragEnded event), you must provide a new array reference rather than mutating the existing one.

Correct (Immutable):

dragEnded(event: GanttDragEvent) {
  // Create a new array reference to trigger change detection
  this.items = [...this.items];
}

Incorrect (Mutable):

dragEnded(event: GanttDragEvent) {
  // Modifying the object property directly will NOT trigger view updates
  event.item.start = newDate;
  event.item.end = newDate;
}

// ✅ Correct
dragEnded(event: GanttDragEvent) {
  this.items = [...this.items];
}

In a Standalone Angular application, provide the GANTT_GLOBAL_CONFIG token within the providers array of the bootstrapApplication function.

import { GANTT_GLOBAL_CONFIG, GanttGlobalConfig } from '@worktile/gantt';

bootstrapApplication(AppComponent, {
  providers: [
    ...,
    {
      provide: GANTT_GLOBAL_CONFIG,
      useValue: {
        dateOptions: {
          timeZone: 'Asia/Shanghai',
          weekStartsOn: 1
        },
        linkOptions: {
          dependencyTypes: [GanttLinkType.fs],
          showArrow: false,
          lineType: 'curve'
        },
        styleOptions: {
          primaryColor: '#6698ff',
          headerHeight: 44,
          rowHeight: 44,
          barHeight: 22
        }
      } as GanttGlobalConfig
    }
  ]
}).catch(err => console.error(err));

Install the core Gantt chart component using npm or yarn:

npm install @worktile/gantt
# or
yarn add @worktile/gantt

If you plan to use the GanttPrintService for exporting or printing the chart, you must also install html2canvas as an optional dependency:

npm install html2canvas