// app.config.ts import { ApplicationConfig } from "@angular/core"; import { provideApexGanttLicense } from "ngx-apexgantt"; export const appConfig: ApplicationConfig = { providers: [ provideApexGanttLicense("your-license-key-here"), // other providers... ], };

// app.module.ts import { NgModule } from "@angular/core"; import { provideApexGanttLicense } from "ngx-apexgantt"; @NgModule({ providers: [provideApexGanttLicense("your-license-key-here")], }) export class AppModule {}

// main.ts import { bootstrapApplication } from "@angular/platform-browser"; import { setApexGanttLicense } from "ngx-apexgantt"; import { AppComponent } from "./app/app.component"; import { appConfig } from "./app/app.config"; // set license before bootstrapping setApexGanttLicense("your-license-key-here"); bootstrapApplication(AppComponent, appConfig);

import { Component } from "@angular/core"; import { NgxApexGanttComponent, TaskInput } from "ngx-apexgantt"; @Component({ selector: "app-root", standalone: true, imports: [NgxApexGanttComponent], template: `  <ngx-apexgantt  [tasks]="tasks"  [viewMode]="'week'"  [height]="'500px'"  (taskUpdateSuccess)="onTaskUpdate($event)"  >  </ngx-apexgantt>  `, }) export class AppComponent { tasks: TaskInput[] = [ { id: "task-1", name: "Project Planning", startTime: "01-01-2024", endTime: "01-08-2024", progress: 75, }, { id: "task-2", name: "Development", startTime: "01-09-2024", endTime: "01-20-2024", progress: 40, dependency: "task-1", }, ]; onTaskUpdate(event: any) { console.log("Task updated:", event); } }

import { Component } from "@angular/core"; import { TaskInput } from "ngx-apexgantt"; @Component({ selector: "app-gantt", template: `  <ngx-apexgantt [tasks]="tasks" [viewMode]="'week'" [height]="'500px'">  </ngx-apexgantt>  `, }) export class GanttComponent { tasks: TaskInput[] = [ // your tasks... ]; }

// app.module.ts import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { NgxApexGanttModule } from "ngx-apexgantt"; import { GanttComponent } from "./gantt.component"; @NgModule({ declarations: [GanttComponent], imports: [BrowserModule, NgxApexGanttModule], }) export class AppModule {}

import { Component, ViewChild } from "@angular/core"; import { NgxApexGanttComponent } from "ngx-apexgantt"; @Component({ template: `<ngx-apexgantt #ganttChart></ngx-apexgantt>`, }) export class MyComponent { @ViewChild("ganttChart") ganttChart!: NgxApexGanttComponent; zoomIn() { this.ganttChart.zoomIn(); } zoomOut() { this.ganttChart.zoomOut(); } updateTask() { this.ganttChart.updateTask("task-1", { progress: 80 }); } updateAll() { this.ganttChart.update({ viewMode: "month" }); } }

import { Component, ViewChild } from "@angular/core"; import { NgxApexGanttComponent, TaskInput } from "ngx-apexgantt"; @Component({ selector: "app-gantt-basic", standalone: true, imports: [NgxApexGanttComponent], template: `  <div class="controls">  <button (click)="ganttChart.zoomIn()">Zoom In</button>  <button (click)="ganttChart.zoomOut()">Zoom Out</button>  </div>  <ngx-apexgantt  #ganttChart  [tasks]="tasks"  [viewMode]="'week'"  [height]="'500px'"  >  </ngx-apexgantt>  `, }) export class GanttBasicComponent { @ViewChild("ganttChart") ganttChart!: NgxApexGanttComponent; tasks: TaskInput[] = [ { id: "task-1", name: "Planning", startTime: "01-01-2024", endTime: "01-10-2024", progress: 100, }, { id: "task-2", name: "Development", startTime: "01-11-2024", endTime: "01-25-2024", progress: 60, dependency: "task-1", }, ]; }

import { Component } from "@angular/core"; import { NgxApexGanttComponent, GanttOptions, ViewMode } from "ngx-apexgantt"; @Component({ selector: "app-gantt-advanced", standalone: true, imports: [NgxApexGanttComponent], template: `  <div class="controls">  <select [(ngModel)]="currentViewMode" (change)="updateViewMode()">  <option value="day">Day</option>  <option value="week">Week</option>  <option value="month">Month</option>  </select>  <button (click)="toggleTheme()">Toggle Theme</button>  </div>  <ngx-apexgantt  [options]="ganttOptions"  [viewMode]="currentViewMode"  [theme]="currentTheme"  (taskUpdateSuccess)="onTaskUpdate($event)"  (taskDragged)="onTaskDragged($event)"  >  </ngx-apexgantt>  `, }) export class GanttAdvancedComponent { currentViewMode: string = "week"; currentTheme: "light" | "dark" = "light"; ganttOptions: GanttOptions = { series: [ { id: "task-1", name: "Design Phase", startTime: "01-01-2024", endTime: "01-15-2024", progress: 75, }, // more tasks... ], height: "600px", enableToolbar: true, enableTaskDrag: true, enableTaskResize: true, barBackgroundColor: "#537CFA", rowHeight: 32, }; updateViewMode() { console.log("View mode changed to:", this.currentViewMode); } toggleTheme() { this.currentTheme = this.currentTheme === "light" ? "dark" : "light"; } onTaskUpdate(event: any) { console.log("Task updated:", event); // save to backend } onTaskDragged(event: any) { console.log("Task dragged:", event); } }

import { Component } from "@angular/core"; import { NgxApexGanttComponent, GanttOptions } from "ngx-apexgantt"; @Component({ selector: "app-gantt-parsing", standalone: true, imports: [NgxApexGanttComponent], template: `<ngx-apexgantt [options]="ganttOptions"></ngx-apexgantt>`, }) export class GanttParsingComponent { // external data format from API apiData = [ { task_id: "T1", task_name: "Design Phase", start_date: "01-01-2024", end_date: "01-15-2024", completion: 75, }, { task_id: "T2", task_name: "Development", start_date: "01-16-2024", end_date: "01-30-2024", completion: 40, }, ]; ganttOptions: GanttOptions = { series: this.apiData, parsing: { id: "task_id", name: "task_name", startTime: "start_date", endTime: "end_date", progress: "completion", }, height: "500px", }; }

import { Component } from "@angular/core"; import { NgxApexGanttComponent } from "ngx-apexgantt"; @Component({ selector: "app-gantt-events", standalone: true, imports: [NgxApexGanttComponent], template: `  <ngx-apexgantt  [tasks]="tasks"  (taskUpdateSuccess)="handleTaskUpdate($event)"  (taskDragged)="handleTaskDragged($event)"  (taskResized)="handleTaskResized($event)"  (taskUpdateError)="handleError($event)"  >  </ngx-apexgantt>  <div class="event-log">  <h3>Event Log:</h3>  <pre>{{ eventLog }}</pre>  </div>  `, }) export class GanttEventsComponent { tasks = [ // your tasks... ]; eventLog = ""; handleTaskUpdate(event: any) { this.eventLog += `Task Updated: ${event.taskId}\n`; // sync with backend this.syncWithBackend(event.updatedTask); } handleTaskDragged(event: any) { this.eventLog += `Task Dragged: ${event.taskId} moved ${event.daysMoved} days\n`; } handleTaskResized(event: any) { this.eventLog += `Task Resized: ${event.taskId} duration changed by ${event.durationChange}\n`; } handleError(event: any) { console.error("Update failed:", event.error); } async syncWithBackend(task: any) { // your API call here } }

import { ColumnKey } from "ngx-apexgantt"; ganttOptions: GanttOptions = { series: tasks, columnConfig: [ { key: ColumnKey.Name, title: "Task Name", minWidth: "100px", flexGrow: 3, }, { key: ColumnKey.StartTime, title: "Start", minWidth: "100px", flexGrow: 1.5, }, { key: ColumnKey.Duration, title: "Duration", minWidth: "80px", flexGrow: 1, }, ], };

ganttOptions: GanttOptions = { series: tasks, annotations: [ { x1: "10-25-2024", x2: "END_DATE", label: { text: "Sprint 1", fontColor: "#333333", }, }, ], };

import { NgxApexGanttComponent, GanttOptions, TaskInput, ViewMode, ColumnKey, TaskUpdateDetail, TaskDraggedDetail, } from "ngx-apexgantt";