### Install Peer Dependencies

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/getting-started/getting-started.md

Install the required peer dependencies if they are not already present.

```bash
npm install @angular/cdk date-fns @date-fns/tz --save
```

--------------------------------

### Full Gantt Chart Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/getting-started/getting-started.md

A complete example demonstrating a Gantt chart with items and configuration.

```typescript
import { Component } from '@angular/core';
import { NgxGanttComponent, NgxGanttTableComponent, NgxGanttTableColumnComponent, GanttItem, GanttViewType } from '@worktile/gantt';

@Component({
  selector: 'app-gantt-example',
  standalone: true,
  imports: [NgxGanttComponent, NgxGanttTableComponent, NgxGanttTableColumnComponent],
  template: `
    <ngx-gantt [items]="items" [viewType]="viewType">
      <ngx-gantt-table>
        <ngx-gantt-column name="Task Name" width="200px">
          <ng-template #cell let-item="item">
            {{ item.title }}
          </ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>
  `
})
export class GanttExampleComponent {
  viewType = GanttViewType.day;

  items: GanttItem[] = [
    {
      id: '1',
      title: 'Design Phase',
      start: 1627729997,
      end: 1628421197
    },
    {
      id: '2',
      title: 'Development Phase',
      start: 1628507597,
      end: 1633345997
    },
    {
      id: '3',
      title: 'Testing Phase',
      start: 1633433997,
      end: 1636035597
    }
  ];
}
```

--------------------------------

### Install Core Package

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/getting-started/getting-started.md

Install the ngx-gantt core package using npm or yarn.

```bash
npm install @worktile/gantt --save
# or
yarn add @worktile/gantt
```

--------------------------------

### Development Setup

Source: https://github.com/worktile/ngx-gantt/blob/master/README.md

Commands to clone the repository, install dependencies, and start the development server.

```bash
git clone git@github.com:worktile/ngx-gantt.git
cd ngx-gantt
npm ci
npm run start
```

--------------------------------

### Custom Handling Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/print.md

An example showing how to get the canvas, convert it to a blob, and upload it to a server using HttpClient.

```typescript
import { HttpClient } from '@angular/common/http';

@Component({
  providers: [GanttPrintService]
})
export class GanttPrintComponent {
  constructor(
    private printService: GanttPrintService,
    private http: HttpClient
  ) {}

  async exportAndUpload() {
    try {
      const canvas = await this.printService.html2canvas('toolbar');
      const blob = await new Promise<Blob>((resolve) => {
        canvas.toBlob((blob) => resolve(blob), 'image/png');
      });

      // Upload to the server
      const formData = new FormData();
      formData.append('image', blob, 'gantt-chart.png');

      this.http.post('/api/upload', formData).subscribe({
        next: (response) => {
          console.log('Upload successful', response);
        },
        error: (error) => {
          console.error('Upload failed', error);
        }
      });
    } catch (error) {
      console.error('Export failed', error);
    }
  }
}
```

--------------------------------

### View Configuration Migration Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/getting-started/upgrade-to-21.md

Demonstrates the transformation of old v20 view configuration options to the new v21 structure, highlighting field renaming and the integration of scroll-loading logic.

```typescript
// ❌ Old v20 configuration
const viewOptions = {
  cellWidth: 40,
  addAmount: 1,
  addUnit: 'month',
  hoilday: { isHoliday: true },
  datePrecisionUnit: 'day'
};

// ✅ New v21 configuration
const viewOptions = {
  unitWidth: 40,
  loadDuration: { amount: 1, unit: 'month' }, // Structured merge
  holiday: { isHoliday: true }, // Spelling correction
  precisionUnit: 'day'
};
```

--------------------------------

### NgModule Import

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/getting-started/getting-started.md

Example of importing ngx-gantt module in a traditional Angular NgModule.

```typescript
import { NgModule } from '@angular/core';
import { NgxGanttModule } from '@worktile/gantt';

@NgModule({
  imports: [
    NgxGanttModule
    // ... other modules
  ]
  // ...
})
export class AppModule {}
```

--------------------------------

### Minimal Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/toolbar.md

A minimal example demonstrating the toolbar functionality.

```typescript
import { Component } from '@angular/core';
import { GanttItem, GanttViewType, GanttToolbarOptions, GanttView } from '@worktile/gantt';

@Component({
  selector: 'app-gantt-toolbar',
  template: `
    <ngx-gantt
      [items]="items"
      [viewType]="viewType"
      [showToolbar]="true"
      [toolbarOptions]="toolbarOptions"
      (viewChange)="onViewChange($event)"
    >
      <ngx-gantt-table>
        <ngx-gantt-column name="Task">
          <ng-template #cell let-item="item">
            {{ item.title }}
          </ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>
  `
})
export class GanttToolbarComponent {
  viewType = GanttViewType.day;

  toolbarOptions: GanttToolbarOptions = {
    viewTypes: [GanttViewType.day, GanttViewType.week, GanttViewType.month]
  };

  items: GanttItem[] = [{ id: '1', title: 'Task 1', start: 1627729997, end: 1628421197 }];

  onViewChange(event: GanttView) {
    this.viewType = event.viewType;
  }
}
```

--------------------------------

### Configure Styles in angular.json

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/getting-started/getting-started.md

Recommended method to import ngx-gantt styles by adding the path to the styles array in angular.json.

```json
{
  "styles": ["node_modules/@worktile/gantt/styles/index.scss"]
}
```

--------------------------------

### Standalone Component Import

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/getting-started/getting-started.md

Example of importing ngx-gantt components in a standalone Angular component.

```typescript
import { Component } from '@angular/core';
import { NgxGanttComponent, NgxGanttTableComponent, NgxGanttTableColumnComponent, GanttItem, GanttViewType } from '@worktile/gantt';

@Component({
  selector: 'app-gantt-example',
  standalone: true,
  imports: [NgxGanttComponent, NgxGanttTableComponent, NgxGanttTableColumnComponent],
  template: `
    <ngx-gantt [items]="items" [viewType]="viewType">
      <ngx-gantt-table>
        <ngx-gantt-column name="Task Name" width="200px">
          <ng-template #cell let-item="item">
            {{ item.title }}
          </ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>
  `
})
export class GanttExampleComponent {
  viewType = GanttViewType.day;

  items: GanttItem[] = [
    {
      id: '1',
      title: 'Design Phase',
      start: 1627729997, // Unix timestamp (seconds)
      end: 1628421197
    },
    {
      id: '2',
      title: 'Development Phase',
      start: 1628507597,
      end: 1633345997
    },
    {
      id: '3',
      title: 'Testing Phase',
      start: 1633433997,
      end: 1636035597
    }
  ];
}
```

--------------------------------

### New Theme Configuration Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/getting-started/upgrade-to-21.md

Shows the updated theme configuration in v21, which supports defining multiple color schemes via the `themes` field and includes a renamed `rowHeight` option.

```typescript
styleOptions: {
  rowHeight: 44,
  defaultTheme: 'default',
  primaryColor: '#1890ff', // Quickly override the primary tone
  themes: {
    default: {
      primary: '#1890ff',
      background: '#ffffff',
      text: { main: '#333333' },
      gray: { 100: '#fafafa', 500: '#d9d9d9' }
    }
  }
}
```

--------------------------------

### Minimal Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/print.md

A complete minimal example demonstrating how to set up and export a Gantt chart, including registering the Gantt root element.

```typescript
import { Component, viewChild, afterNextRender } from '@angular/core';
import { GanttItem, GanttViewType, NgxGanttComponent, GanttPrintService } from '@worktile/gantt';

@Component({
  selector: 'app-gantt-print',
  template: `
    <div class="toolbar">
      <button (click)="exportImage()">Export as image</button>
    </div>

    <ngx-gantt #gantt [items]="items" [viewType]="viewType">
      <ngx-gantt-table>
        <ngx-gantt-column name="Task" width="200px">
          <ng-template #cell let-item="item">
            {{ item.title }}
          </ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>
  `,
  providers: [GanttPrintService]
})
export class GanttPrintComponent {
  gantt = viewChild<NgxGanttComponent>('gantt');

  viewType = GanttViewType.day;

  items: GanttItem[] = [{ id: '1', title: 'Task 1', start: 1627729997, end: 1628421197 }];

  constructor(private printService: GanttPrintService) {
    afterNextRender(() => {
      // Register the Gantt chart root element
      const gantt = this.gantt();
      if (gantt) {
        const ganttRoot = gantt.ganttRoot();
        if (ganttRoot) {
          this.printService.register(ganttRoot.elementRef);
        }
      }
    });
  }

  exportImage() {
    // Ignore the toolbar
    this.printService.print('gantt-chart', 'toolbar');
  }
}
```

--------------------------------

### Custom Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/baseline.md

Example of how to use a custom template for baselines.

```html
<ngx-gantt [items]="items" [baselineItems]="baselineItems">
  <ng-template #baseline let-item="item" let-refs="refs">
    <div class="custom-baseline" [style.width.px]="refs.width" [style.left.px]="refs.x"></div>
  </ng-template>

  <ngx-gantt-table>
    <!-- ... -->
  </ngx-gantt-table>
</ngx-gantt>
```

```scss
.custom-baseline {
  position: absolute;
  bottom: 2px;
  height: 4px;
  background: #ff6b6b;
  opacity: 0.6;
  border-radius: 2px;
  z-index: 2;
}
```

--------------------------------

### Minimal Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/bar.md

A basic example demonstrating how to set up ngx-gantt with a table column and sample data.

```typescript
import { Component } from '@angular/core';
import { GanttItem, GanttViewType } from '@worktile/gantt';

@Component({
  selector: 'app-gantt-bar',
  template: `
    <ngx-gantt [items]="items" [viewType]="viewType">
      <ngx-gantt-table>
        <ngx-gantt-column name="Task" width="200px">
          <ng-template #cell let-item="item">
            {{ item.title }}
          </ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>
  `
})
export class GanttBarComponent {
  viewType = GanttViewType.day;

  items: GanttItem[] = [
    { id: '1', title: 'Task 1', start: 1627729997, end: 1628421197 },
    { id: '2', title: 'Task 2', start: 1628507597, end: 1633345997 }
  ];
}
```

--------------------------------

### Installation

Source: https://github.com/worktile/ngx-gantt/blob/master/README.md

Install the ngx-gantt package using npm or yarn.

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

--------------------------------

### Basic Table Structure

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/table.md

This example shows the basic structure of the ngx-gantt table with two columns: 'Task Name' and 'Start Time'. It demonstrates how to define columns and customize cell content using templates.

```html
<ngx-gantt #gantt [items]="items">
  <ngx-gantt-table>
    <ngx-gantt-column name="Task Name" width="200px" [showExpandIcon]="true">
      <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
    </ngx-gantt-column>

    <ngx-gantt-column name="Start Time" width="150px">
      <ng-template #cell let-item="item"> {{ item.start | date: 'yyyy-MM-dd' }} </ng-template>
    </ngx-gantt-column>
  </ngx-gantt-table>
</ngx-gantt>
```

--------------------------------

### Minimal Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/table.md

A minimal example demonstrating the ngx-gantt table with draggable functionality and handling the dragDropped event.

```typescript
import { Component } from '@angular/core';
import { GanttItem, GanttViewType, GanttTableDragDroppedEvent } from '@worktile/gantt';

@Component({
  selector: 'app-gantt-table',
  template: `
    <ngx-gantt [items]="items" [viewType]="viewType">
      <ngx-gantt-table [draggable]="true" (dragDropped)="onDragDropped($event)">
        <ngx-gantt-column name="Task" width="200px">
          <ng-template #cell let-item="item">
            {{ item.title }}
          </ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>
  `
})
export class GanttTableComponent {
  viewType = GanttViewType.day;

  items: GanttItem[] = [
    { id: '1', title: 'Task 1', start: 1627729997, end: 1628421197 },
    { id: '2', title: 'Task 2', start: 1628507597, end: 1633345997 }
  ];

  onDragDropped(event: GanttTableDragDroppedEvent) {
    // Handle drag drop logic
    this.reorganizeItems(event);
    // Immutable update
    this.items = [...this.items];
  }

  private reorganizeItems(event: GanttTableDragDroppedEvent) {
    // Implement drag-and-drop data reorganization logic
  }
}
```

--------------------------------

### Full Example with Link Drag and Drop

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/links.md

An example demonstrating how to enable link creation via drag and drop and handle the `linkDragEnded` event.

```typescript
import { Component } from '@angular/core';
import { GanttItem, GanttViewType, GanttLinkDragEvent, GanttLinkType } from '@worktile/gantt';

@Component({
  template: `
    <ngx-gantt [items]="items" [viewType]="viewType" [linkable]="true" (linkDragEnded)="onLinkDragEnded($event)">
      <ngx-gantt-table>
        <ngx-gantt-column name="Task" width="200px">
          <ng-template #cell let-item="item">{{ item.title }}</ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>
  `
})
export class GanttLinksComponent {
  viewType = GanttViewType.day;
  items: GanttItem[] = [
    { id: '1', title: 'Task 1', start: 1627729997, end: 1628421197 },
    { id: '2', title: 'Task 2', start: 1628507597, end: 1633345997 }
  ];

  onLinkDragEnded(event: GanttLinkDragEvent) {
    this.items = this.items.map((item) => {
      if (item.id === event.source.id) {
        return {
          ...item,
          links: [...(item.links || []), { type: event.type, link: event.target.id }]
        };
      }
      return item;
    });
  }
}
```

--------------------------------

### v21 i18n Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/getting-started/upgrade-to-21.md

Illustrates the new i18n structure in v21, where time-axis text formatting has moved from `dateFormats` to `tickFormats`.

```typescript
// v21 i18n example
const localeConfig = {
  id: 'zh-cn',
  views: {
    day: {
      label: 'Day',
      tickFormats: {
        period: 'YYYY-MM', // corresponds to original primary
        unit: 'D' // corresponds to original secondary
      }
    }
  }
};
```

--------------------------------

### Minimal Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/views.md

A basic example demonstrating how to set up a Gantt chart with a custom view configuration, including date ranges, unit width, tick formatting, drag tooltips, scroll loading, and holiday settings.

```typescript
import { Component } from '@angular/core';
import { GanttItem, GanttViewType, GanttViewOptions, GanttDate } from '@worktile/gantt';

@Component({
  selector: 'app-gantt-view',
  template: `
    <ngx-gantt [items]="items" [viewType]="viewType" [viewOptions]="viewOptions">
      <ngx-gantt-table>
        <ngx-gantt-column name="Task" width="200px">
          <ng-template #cell let-item="item">
            {{ item.title }}
          </ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>
  `
})
export class GanttViewComponent {
  viewType = GanttViewType.day;

  viewOptions: GanttViewOptions = {
    // Custom time range
    start: new GanttDate('2021-01-01'),
    end: new GanttDate('2021-12-31'),
    minBoundary: new GanttDate('2020-01-01'),
    maxBoundary: new GanttDate('2022-12-31'),

    // Unit width
    unitWidth: 35,

    // Tick formatting
    tickFormats: {
      period: 'yyyy-MM',
      unit: 'dd'
    },

    // Drag tooltip format
    dragTooltipFormat: 'MM-dd HH:mm',

    // Scroll loading configuration
    loadDuration: {
      amount: 3,
      unit: 'month'
    },

    // Holiday configuration (supported in day view only)
    holiday: {
      isHoliday: (date: GanttDate) => {
        return date.isWeekend();
      },
      hideHoliday: false
    }
  };

  items: GanttItem[] = [
    {
      id: '1',
      title: 'Task 1',
      start: 1627729997,
      end: 1628421197
    }
  ];
}

```

--------------------------------

### Optional: html2canvas installation

Source: https://github.com/worktile/ngx-gantt/blob/master/README.md

Install html2canvas if you plan to use export or print features.

```bash
npm install html2canvas
```

--------------------------------

### Global Timezone and Week Start Configuration

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/date-timezone.md

Example of configuring the global timezone and the start day of the week for the Gantt chart using GANTT_GLOBAL_CONFIG.

```typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { GANTT_GLOBAL_CONFIG, GanttGlobalConfig } from '@worktile/gantt';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    {
      provide: GANTT_GLOBAL_CONFIG,
      useValue: {
        dateOptions: {
          timeZone: 'Asia/Shanghai', // Timezone
          weekStartsOn: 1 // Week starts on: 0=Sunday, 1=Monday
        }
      } as GanttGlobalConfig
    }
  ]
}).catch((err) => console.error(err));
```

--------------------------------

### Minimal ngx-gantt-root Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/advanced/advanced-layout.md

A basic example demonstrating the usage of ngx-gantt-root with custom side and main templates, including task bar rendering.

```typescript
import { Component, OnInit } from '@angular/core';
import { GANTT_UPPER_TOKEN, GanttUpper, NgxGanttRootComponent, NgxGanttBarComponent, GanttItemInternal } from '@worktile/gantt';

@Component({
  selector: 'app-custom-gantt',
  template: `
    <ngx-gantt-root [sideWidth]="300">
      <ng-template #sideTemplate>
        <!-- Custom left area -->
        <div class="custom-side">
          @for (item of customItems; track item.id) {
            <div>{{ item.title }}</div>
          }
        </div>
      </ng-template>

      <ng-template #mainTemplate>
        <!-- Custom main area -->
        <div class="gantt-main" [style.width.px]="view.width">
          @for (item of customItems; track item.id) {
            <ngx-gantt-bar [item]="item"></ngx-gantt-bar>
          }
        </div>
      </ng-template>
    </ngx-gantt-root>
  `,
  providers: [
    {
      provide: GANTT_UPPER_TOKEN,
      useExisting: AppCustomGanttComponent
    }
  ],
  imports: [NgxGanttRootComponent, NgxGanttBarComponent]
})
export class AppCustomGanttComponent extends GanttUpper implements OnInit {
  customItems: GanttItemInternal[] = [];

  override ngOnInit() {
    super.ngOnInit();
    this.buildItems();
  }

  private buildItems() {
    // Custom data processing logic
  }
}

```

--------------------------------

### Minimal Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/range.md

A minimal example demonstrating the usage of range type tasks with a custom template.

```typescript
import { Component } from '@angular/core';
import { GanttItem, GanttViewType } from '@worktile/gantt';

@Component({
  selector: 'app-gantt-range',
  template: `
    <ngx-gantt [items]="items" [viewType]="viewType">
      <ng-template #range let-item="item" let-refs="refs">
        <div class="range-item" [style.left.px]="refs.x" [style.width.px]="refs.width">
          {{ item.title }}
        </div>
      </ng-template>
      <ngx-gantt-table>
        <ngx-gantt-column name="Task" width="200px">
          <ng-template #cell let-item="item">
            {{ item.title }}
          </ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>
  `
})
export class GanttRangeComponent {
  viewType = GanttViewType.month;

  items: GanttItem[] = [
    {
      id: '1',
      title: 'Version V1.0',
      start: 1627729997,
      type: 'range'
    },
    {
      id: '2',
      title: 'Version V2.0',
      start: 1630421197,
      type: 'range'
    }
  ];
}
```

--------------------------------

### Time Input Formats for GanttItem

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/date-timezone.md

Examples of how to provide start and end times for Gantt items using Unix timestamps and Date objects.

```typescript
const items1: GanttItem[] = [
  {
    id: '1',
    title: 'Task',
    start: 1627729997, // 10-digit Unix timestamp (seconds)
    end: 1627729997000 // 13-digit Unix timestamp (milliseconds)
  }
];

const items2: GanttItem[] = [
  {
    id: '2',
    title: 'Task',
    start: new Date(1627729997 * 1000),
    end: new Date(1628421197 * 1000)
  }
];
```

--------------------------------

### Holiday Configuration Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/views.md

Example demonstrating how to configure holiday display in the day view using the `holiday` option, including custom `isHoliday` logic and `hideHoliday` setting.

```typescript
const viewOptions: GanttViewOptions = {
  holiday: {
    isHoliday: (date: GanttDate) => {
      // Determine whether it is a holiday
      return date.isWeekend() || isHoliday(date.value);
    },
    hideHoliday: false // Whether to hide the holiday column; if true, it won’t be displayed but still takes space
  }
};
```

--------------------------------

### Dependency Types Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/links.md

Illustrates the usage of different dependency types (`fs`, `ff`, `ss`, `sf`) with examples of how to define them in the `links` array.

```typescript
const items: GanttItem[] = [
  { id: 'A', title: 'Design', start: 1627729997, end: 1628421197 },
  {
    id: 'B',
    title: 'Development',
    links: [
      { type: GanttLinkType.fs, link: 'A' } // FS: Task A finishes → Task B can start
      // { type: GanttLinkType.ff, link: 'A' }, // FF: Task A finishes → Task B can finish
      // { type: GanttLinkType.ss, link: 'A' }, // SS: Task A starts → Task B can start
      // { type: GanttLinkType.sf, link: 'A' }  // SF: Task A starts → Task B can finish
    ]
  }
];
```

--------------------------------

### Tick Formatting Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/views.md

Example demonstrating how to customize the format of period and unit ticks using `date-fns` format strings within `viewOptions`.

```typescript
const viewOptions: GanttViewOptions = {
  tickFormats: {
    period: 'yyyy-MM', // Period ticks (e.g., 2021-07)
    unit: 'dd' // Unit ticks (e.g., 31)
  }
};
```

--------------------------------

### Using origin to attach business data

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/data-model.md

Example demonstrating how to attach custom business data to a GanttItem and access it.

```typescript
interface MyBusinessData {
  taskId: string;
  assignee: string;
  priority: number;
  // ... other business fields
}

const items: GanttItem[] = [
  {
    id: '1',
    title: 'Task 1',
    start: 1627729997,
    end: 1628421197,
    origin: {
      taskId: 'TASK-001',
      assignee: 'John Doe',
      priority: 1
    } as MyBusinessData
  }
];

// Access in event callbacks
dragEnded(event: GanttDragEvent) {
  const businessData = event.item.origin as MyBusinessData;
  console.log(businessData.assignee); // 'John Doe'
}
```

--------------------------------

### Drag Tooltip Format Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/views.md

Example showing how to customize the date format displayed in the drag tooltip using the `dragTooltipFormat` option.

```typescript
const viewOptions: GanttViewOptions = {
  dragTooltipFormat: 'MM-dd HH:mm' // Default 'MM-dd'
};
```

--------------------------------

### Scroll Loading Configuration Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/views.md

Example of configuring the `loadDuration` to control the time span loaded during horizontal scrolling.

```typescript
const viewOptions: GanttViewOptions = {
  loadDuration: {
    amount: 1,
    unit: 'month' // 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year'
  }
};
```

--------------------------------

### Complete Example - Basic Tree Structure

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/tree.md

A complete example of a basic tree structure in ngx-gantt, including a custom table column.

```typescript
import { Component } from '@angular/core';
import { GanttItem, GanttViewType } from '@worktile/gantt';

@Component({
  template: `
    <ngx-gantt [items]="items" [viewType]="viewType">
      <ngx-gantt-table>
        <ngx-gantt-column name="Task">
          <ng-template #cell let-item="item">{{ item.title }}</ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>
  `
})
export class GanttTreeComponent {
  viewType = GanttViewType.day;
  items: GanttItem[] = [
    {
      id: '1',
      title: 'Project',
      start: 1627729997,
      end: 1633345997,
      expanded: true,
      children: [
        {
          id: '1-1',
          title: 'Stage 1',
          start: 1627729997,
          end: 1627902797
        },
        {
          id: '1-2',
          title: 'Stage 2',
          start: 1628507597,
          end: 1630667597
        }
      ]
    }
  ];
}
```

--------------------------------

### Gantt Component HTML

Source: https://github.com/worktile/ngx-gantt/blob/master/example/src/app/gantt-virtual-scroll/gantt.component.html

This HTML template shows how to use the Ngx-Gantt component with virtual scrolling enabled by default. It includes item titles, start and end dates, and column headers. It also demonstrates iterating through view units and conditionally rendering content.

```html
<ngx-gantt #gantt [items]="items" [columns]="columns" [virtualScrollEnabled]="true">
  <div *ngxGanttColumn="let column of columns">
    {{ column.name() }}
  </div>
  <div *ngxGanttRow="let item of items">
    {{ item.title }}
    {{ item.start * 1000 | date: 'yyyy-MM-dd' }}
    {{ item.end * 1000 | date: 'yyyy-MM-dd' }}
  </div>

  @for (column of columns; track $index) {

  {{ column.name() }}

  }

  {{ item.title }}

  @for (day of gantt?.view.unitTicks; track $index) {

  @if (false) {

  } @else {

  0

  }

  }
</ngx-gantt>
```

--------------------------------

### Infinite Scroll Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/performance.md

Example of implementing Infinite Scroll by listening to `(virtualScrolledIndexChange)` to load the next page when the scroll approaches the bottom.

```html
<ngx-gantt [items]="items" [loading]="loading" [loadingDelay]="200" (virtualScrolledIndexChange)="onVirtualScroll($event)">
  <ngx-gantt-table>
    <ngx-gantt-column name="Task Title" width="200px">
      <ng-template #cell let-item="item">{{ item.title }}</ng-template>
    </ngx-gantt-column>
  </ngx-gantt-table>
</ngx-gantt>
```

```typescript
import { Component } from '@angular/core';
import { GanttItem, GanttVirtualScrolledIndexChangeEvent } from '@worktile/gantt';

@Component({ ... })
export class GanttPerformanceExampleComponent {
  items: GanttItem[] = [];
  loading = false;

  onVirtualScroll(event: GanttVirtualScrolledIndexChangeEvent) {
    // When there are 10 items left before reaching the bottom, load the next page
    if (event.renderedRange.end + 10 >= event.count && !this.loading) {
      this.loadNextPage();
    }
  }

  loadNextPage() {
    this.loading = true;
    this.taskService.getTasks().subscribe(res => {
      this.items = [...this.items, ...res.data];
      this.loading = false;
    });
  }
}
```

--------------------------------

### Group Mode Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/data-model.md

Example of organizing data using groups and associating items with group IDs.

```typescript
const groups: GanttGroup[] = [
  { id: 'group1', title: 'Development Team' },
  { id: 'group2', title: 'QA Team' }
];

const items: GanttItem[] = [
  { id: '1', title: 'Frontend Development', group_id: 'group1', start: 1627729997, end: 1628421197 },
  { id: '2', title: 'Backend Development', group_id: 'group1', start: 1628507597, end: 1633345997 },
  { id: '3', title: 'Functional Testing', group_id: 'group2', start: 1633433997, end: 1636035597 }
];
```

--------------------------------

### Tree Mode Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/data-model.md

Example of organizing data hierarchically using the 'children' property.

```typescript
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
      }
    ]
  }
];
```

--------------------------------

### Async Loading Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/tree.md

This example shows how to configure the ngx-gantt component to load child items asynchronously when a parent task is expanded. It uses Angular's HttpClient to fetch child data from an API and handles potential errors.

```typescript
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { GanttItem, GanttViewType } from '@worktile/gantt';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Component({
  template: `
    <ngx-gantt [items]="items" [viewType]="viewType" [async]="true" [childrenResolve]="childrenResolve">
      <ngx-gantt-table>
        <ngx-gantt-column name="Task" width="200px" [showExpandIcon]="true">
          <ng-template #cell let-item="item">{{ item.title }}</ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>
  `
})
export class GanttAsyncComponent {
  viewType = GanttViewType.day;
  items: GanttItem[] = [
    {
      id: '1',
      title: 'Parent Task',
      start: 1627729997,
      end: 1633345997,
      children: [] // Initially empty; load asynchronously when expanded
    }
  ];

  constructor(private http: HttpClient) {}

  childrenResolve = (item: GanttItem) => {
    return this.http.get<GanttItem[]>(`/api/tasks/${item.id}/children`).pipe(
      catchError((error) => {
        console.error('Failed to load child nodes:', error);
        return of([]);
      })
    );
  };
}

```

--------------------------------

### Group Mode Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/data-model.md

Shows how to structure data for group mode, assigning tasks to different teams.

```typescript
const groups: GanttGroup[] = [
  { id: 'g1', title: 'Development Team' },
  { id: 'g2', title: 'QA Team' }
];

const items: GanttItem[] = [
  { id: '1', title: 'Frontend Development', group_id: 'g1', start: 1627729997, end: 1628421197 },
  { id: '2', title: 'Backend Development', group_id: 'g1', start: 1628507597, end: 1633345997 },
  { id: '3', title: 'Functional Testing', group_id: 'g2', start: 1633433997, end: 1636035597 }
];
```

--------------------------------

### Correct Example (immutable update)

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/data-model.md

Demonstrates the correct way to update data immutably by creating a new array, which is required for OnPush change detection.

```typescript
dragEnded(event: GanttDragEvent) {
  this.items = [...this.items];
}
```

--------------------------------

### Enable Dragging

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/bar.md

Example of enabling dragging and handling drag events.

```typescript
import { Component } from '@angular/core';
import { GanttItem, GanttViewType, GanttDragEvent, GanttBarClickEvent } from '@worktile/gantt';

@Component({
  template: `
    <ngx-gantt
      [items]="items"
      [viewType]="viewType"
      [draggable]="true"
      (dragStarted)="onDragStarted($event)"
      (dragMoved)="onDragMoved($event)"
      (dragEnded)="onDragEnded($event)"
      (barClick)="onBarClick($event)"
    >
      <ngx-gantt-table>
        <ngx-gantt-column name="Task" width="200px">
          <ng-template #cell let-item="item">
            {{ item.title }}
          </ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>
  `
})
export class MyComponent {
  viewType = GanttViewType.day;

  items: GanttItem[] = [{ id: '1', title: 'Task 1', start: 1627729997, end: 1628421197 }];

  onBarClick(event: GanttBarClickEvent) {
    console.log('Clicked task bar', event.item);
  }

  onDragStarted(event: GanttDragEvent) {
    console.log('Drag started', event.item);
  }

  onDragMoved(event: GanttDragEvent) {
    console.log('Dragging', event.item);
  }

  onDragEnded(event: GanttDragEvent) {
    this.items = [...this.items];
  }
}
```

--------------------------------

### Tree Mode Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/data-model.md

Illustrates how to define hierarchical tasks using the `children` property for tree mode.

```typescript
const items: GanttItem[] = [
  {
    id: '1',
    title: 'Project Stage',
    start: 1627729997,
    end: 1633345997,
    children: [
      { id: '1-1', title: 'Sub Task 1', start: 1627729997, end: 1627902797 },
      { id: '1-2', title: 'Sub Task 2', start: 1628507597, end: 1630667597 }
    ]
  }
];
```

--------------------------------

### Default Configuration Object

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/configuration/index.md

An example of a default GanttGlobalConfig object, illustrating various settings for locale, links, styles, and dates.

```typescript
const defaultConfig: GanttGlobalConfig = {
  locale: 'zh-hans',
  linkOptions: {
    dependencyTypes: [GanttLinkType.fs],
    showArrow: false,
    lineType: 'curve'
  },
  styleOptions: {
    primaryColor: '#6698ff',
    headerHeight: 44,
    rowHeight: 44,
    barHeight: 22,
    defaultTheme: 'default',
    themes: {
      default: {
        primary: '#6698ff',
        danger: '#FF7575',
        highlight: '#ff9f73',
        background: '#ffffff',
        text: {
          main: '#333333',
          muted: '#888888',
          light: '#aaaaaa',
          inverse: '#ffffff'
        },
        gray: {
          100: '#fafafa',
          200: '#f5f5f5',
          300: '#f3f3f3',
          400: '#eeeeee',
          500: '#dddddd',
          600: '#cacaca'
        }
      }
    }
  },
  dateOptions: {
    weekStartsOn: 1
  }
};
```

--------------------------------

### Table Empty Template

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/table.md

Example of customizing the display when the table is empty using the '#tableEmpty' template.

```html
<ngx-gantt-table>
  <ng-template #tableEmpty>
    <div class="empty-state">No tasks</div>
  </ng-template>

  <!-- ... -->
</ngx-gantt-table>
```

--------------------------------

### Using Views with Component Configuration

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/views.md

Example of how to configure the `viewType` and `viewOptions` properties in a component to control the Gantt chart's view.

```typescript
@Component({
  template: `
    <ngx-gantt [items]="items" [viewType]="viewType" [viewOptions]="viewOptions">
      <!-- ... -->
    </ngx-gantt>
  `
})
export class MyComponent {
  viewType: GanttViewType = GanttViewType.day;
  viewOptions: GanttViewOptions = {
    // View configuration options
  };
}
```

--------------------------------

### Register Global Configuration (Standalone)

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/configuration/index.md

Example of providing the GANTT_GLOBAL_CONFIG token with custom values when bootstrapping an Angular application.

```typescript
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));
```

--------------------------------

### Flat Gantt Chart Component

Source: https://github.com/worktile/ngx-gantt/blob/master/example/src/app/gantt-advanced/component/flat.component.html

This HTML template renders a flat Gantt chart, iterating through groups and their items.

```html
<项目>

@for (group of groups; track trackBy($index, group)) {

{{ group.title }}

}

@if (groups && groups.length > 0) {

@for (group of groups; track trackBy($index, group)) {

@for (items of group.mergedItems; track $index) {

@for (item of items; track trackBy($index, item)) { } 

}

}

}

```

--------------------------------

### Register Global Configuration (NgModule)

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/configuration/index.md

Example of providing the GANTT_GLOBAL_CONFIG token within an NgModule for application-wide configuration.

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

@NgModule({
  providers: [
    {
      provide: GANTT_GLOBAL_CONFIG,
      useValue: {
        dateOptions: {
          timeZone: 'Asia/Shanghai',
          weekStartsOn: 1
        }
      } as GanttGlobalConfig
    }
  ]
})
export class AppModule {}
```

--------------------------------

### Render Group Data Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/features/groups.md

Demonstrates how to organize tasks by groups using `groups` and `items` arrays in ngx-gantt.

```typescript
import { Component } from '@angular/core';
import { GanttGroup, GanttItem, GanttViewType } from '@worktile/gantt';

@Component({
  template: `
    <ngx-gantt [groups]="groups" [items]="items" [viewType]="viewType">
      <ngx-gantt-table>
        <ngx-gantt-column name="Task" width="200px">
          <ng-template #cell let-item="item">
            {{ item.title }}
          </ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>
  `
})
export class GroupsExampleComponent {
  viewType = GanttViewType.month;

  groups: GanttGroup[] = [
    { id: 'dev', title: 'Development Team' },
    { id: 'test', title: 'QA Team' }
  ];

  items: GanttItem[] = [
    { id: '1', title: 'Frontend Development', group_id: 'dev', start: 1627729997, end: 1628421197 },
    { id: '2', title: 'Backend Development', group_id: 'dev', start: 1628507597, end: 1633345997 },
    { id: '3', title: 'Functional Testing', group_id: 'test', start: 1633433997, end: 1636035597 }
  ];
}
```

--------------------------------

### Component Usage Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/api-methods.md

Demonstrates how to use various public methods of the NgxGanttComponent, such as scrollToToday, scrollToDate, getGanttItem, isSelected, expandChildren, and expandGroup.

```typescript
import { Component, viewChild } from '@angular/core';
import { NgxGanttComponent, GanttItem, GanttViewType } from '@worktile/gantt';

@Component({
  template: `
    <ngx-gantt #gantt [items]="items" [viewType]="viewType">
      <ngx-gantt-table>
        <ngx-gantt-column name="Task" width="200px">
          <ng-template #cell let-item="item">
            {{ item.title }}
          </ng-template>
        </ngx-gantt-column>
      </ngx-gantt-table>
    </ngx-gantt>

    <button (click)="gantt()?.scrollToToday()">Back to Today</button>
  `
})
export class GanttExampleComponent {
  gantt = viewChild<NgxGanttComponent>('gantt');

  viewType = GanttViewType.month;
  items: GanttItem[] = [{ id: '1', title: 'Task 1', start: 1627729997, end: 1628421197 }];

  // Scroll to a specific date
  scrollToDate() {
    this.gantt()?.scrollToDate(1627729997);
  }

  // Get the task item
  getTask() {
    const item = this.gantt()?.getGanttItem('1');
    if (item) {
      console.log(item.origin);
    }
  }

  // Check whether it is selected
  checkSelected() {
    const selected = this.gantt()?.isSelected('1');
    console.log('Is selected:', selected);
  }

  // Expand/collapse the child tasks of an item
  toggleChildren(itemId: string) {
    const item = this.gantt()?.getGanttItem(itemId);
    if (item) {
      this.gantt()?.expandChildren(item);
    }
  }

  // Expand/collapse the group
  toggleGroup(groupId: string) {
    const gantt = this.gantt();
    if (gantt) {
      const group = gantt.groups.find((g) => g.id === groupId);
      if (group) {
        gantt.expandGroup(group);
      }
    }
  }
}

```

--------------------------------

### Immutable Data Update Example

Source: https://github.com/worktile/ngx-gantt/blob/master/docs/en-us/guides/core/data-model.md

Shows the correct way to update task data by creating a new array (immutable update).

```typescript
// ✅ Correct
this.items = [...this.items, newItem];

// ❌ Wrong
this.items.push(newItem);
```