State persistence in Angular Gantt component

18 Oct 202524 minutes to read

The Syncfusion® Angular Gantt component supports state management to retain its configuration and data after a browser refresh during the same session.

To enable this, set the enablePersistence property to true. Once enabled, the component saves its state in the browser’s localStorage and restores it automatically after page reloads.

Restore initial Gantt state

The Syncfusion® Angular Gantt component provides options to reset its state, reverting all interactions and configurations to the original setup. This is useful for clearing filters, sorting, and column arrangements, even when enablePersistence is enabled.

Changing component id

To reset the Gantt to its default state, update the component ID. This initializes the component as a new instance, restoring its original configuration.

Here is an example code to change the component id dynamically to restore initial gantt state.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttModule, GanttComponent, SortService, ToolbarService, EditService, FilterService, EditSettingsModel, ToolbarItem } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonModule],
  providers: [ToolbarService, EditService, SortService, FilterService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <button ejs-button style="margin-bottom:20px" id="restore" (click)="clickHandler()">Restore</button>
    <ejs-gantt  #gantt [id]='ganttId' height="430px" [allowSorting] ="true" [allowFiltering]="true"  [editSettings]="editSettings" [toolbar]="toolbar" [dataSource]="data" [taskFields]="taskSettings" [enablePersistence]='true' [splitterSettings]="splitterSettings">
      <e-columns>
        <e-column field="TaskID" width="90" textAlign="Right"></e-column>
        <e-column field="TaskName" width="290"></e-column>
        <e-column field="StartDate" width="390" format="yMd" textAlign="Right"></e-column>
        <e-column field="Duration" width="120" textAlign="Right"></e-column>
        <e-column field="Progress" width="120" textAlign="Right"></e-column>
      </e-columns>
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = { columnIndex: 2 };
  public editSettings?: EditSettingsModel;
  public toolbar?: ToolbarItem[];
  public ganttId?: string = 'TaskDetails'; // Id for the Gantt component.

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.editSettings = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true,
      allowTaskbarEditing: true,
      showDeleteConfirmDialog: true
    };
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search','ExpandAll', 'CollapseAll', 'PrevTimeSpan', 'NextTimeSpan', 'Indent', 'Outdent'];
  }

  public clickHandler(): void {
    this.ganttId = `TaskDetails` + Math.floor(Math.random() * 10);
    location.reload();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Clearing local storage

Clearing the browser’s local storage associated with the Gantt component removes all persisted data, allowing it to load with its initial settings.

Here is an example code on how to clear local storage to retain its default state.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttModule, GanttComponent, ToolbarService, EditService, FilterService, EditSettingsModel, ToolbarItem } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonModule],
  providers: [ToolbarService, EditService, FilterService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <button ejs-button style="margin-bottom:20px" id="restore" (click)="clickHandler()">Restore</button>
    <ejs-gantt  #gantt id="TaskDetails" height="430px" [allowFiltering]="true"  [editSettings]="editSettings" [toolbar]="toolbar" [dataSource]="data" [taskFields]="taskSettings" [enablePersistence]='true' [splitterSettings]="splitterSettings">
      <e-columns>
        <e-column field="TaskID" width="90" textAlign="Right"></e-column>
        <e-column field="TaskName" width="290"></e-column>
        <e-column field="StartDate" width="390" format="yMd" textAlign="Right"></e-column>
        <e-column field="Duration" width="120" textAlign="Right"></e-column>
        <e-column field="Progress" width="120" textAlign="Right"></e-column>
      </e-columns>
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = { columnIndex: 2 };
  public editSettings?: EditSettingsModel;
  public toolbar?: ToolbarItem[];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.editSettings = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true,
      allowTaskbarEditing: true,
      showDeleteConfirmDialog: true
    };
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll', 'PrevTimeSpan', 'NextTimeSpan', 'Indent', 'Outdent'];
  }

  public clickHandler(): void {
    (this.ganttInstance as GanttComponent).enablePersistence = false;
    window.localStorage.setItem("ganttTaskDetails", ""); // Here gantt is component name and TaskDetails is component ID.
    (this.ganttInstance as GanttComponent).destroy();
    location.reload();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Restore to previous state

The Syncfusion® Angular Gantt component allows saving and restoring its state using local storage, ensuring retention of configurations like column order, sorting, and filtering.

To implement this functionality, extract the current state using getPersistData, store it with setItem, retrieve it via getItem, and apply it using setProperties to restore the saved configuration.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttComponent, GanttModule, EditSettingsModel, ToolbarItem, SortService, ToolbarService, EditService, FilterService } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonModule],
  providers: [ToolbarService, EditService, SortService, FilterService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <button ejs-button class="e-success" style="margin-right: 10px;" (click)="save()">Save</button>
    <button ejs-button class="e-danger" (click)="restore()">Restore</button>
    <div style="margin-top: 20px; margin-bottom:10px; color: green; text-align: center;">
    </div>
    <ejs-gantt #gantt id="TaskDetails" height="430px" [allowSorting]="true" [allowFiltering]="true" [editSettings]="editSettings" [toolbar]="toolbar" [dataSource]="data"
    [taskFields]="taskSettings" [enablePersistence]="true" [splitterSettings]="splitterSettings" [sortSettings]="sortSettings">
      <e-columns>
        <e-column field="TaskID" width="90" textAlign="Right"></e-column>
        <e-column field="TaskName" width="290"></e-column>
        <e-column field="StartDate" width="390" format="yMd" textAlign="Right"></e-column>
        <e-column field="Duration" width="120" textAlign="Right"></e-column>
      </e-columns>
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = { columnIndex: 2 };
  public editSettings?: EditSettingsModel;
  public toolbar?: ToolbarItem[];
  public message?: string;
  public sortSettings?: object;

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.editSettings = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true,
      allowTaskbarEditing: true,
      showDeleteConfirmDialog: true
    };
    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search', 'ExpandAll', 'CollapseAll', 'PrevTimeSpan', 'NextTimeSpan', 'Indent', 'Outdent'];
  }

  public save() {
    const persistData = this.ganttInstance?.getPersistData();
    if (persistData) {
      window.localStorage.setItem("ganttTaskDetails", persistData);
      this.message = "Gantt state saved.";
    }
  }

  public restore() {
    const value = window.localStorage.getItem("ganttTaskDetails");
    if (value) {
      const state = JSON.parse(value);
      this.ganttInstance?.treeGrid.setProperties(state);
      this.message = "Previous Gantt state restored.";
    } else {
      this.message = "No saved state found.";
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Get or set localStorage value

When enablePersistence is set to true, the Gantt component state is stored in window.localStorage. The stored data can be retrieved or updated using the getItem and setItem methods available in the browser’s localStorage.

//get the Gantt model.
let value: string = window.localStorage.getItem('ganttGantt'); //"ganttGantt" is component name + component id.
let model: Object = JSON.parse(model);
//set the Gantt model.
window.localStorage.setItem('ganttGantt', JSON.stringify(model)); //"ganttGantt" is component name + component id.

You can refer to our Angular Gantt feature tour page for its groundbreaking feature representations. You can also explore our Angular Gantt example to knows how to present and manipulate data.

Prevent columns from persisting

When enablePersistence is set to true, Gantt properties such as Filtering, Sorting, and Columns are automatically saved.

To prevent specific properties from being persisted, use the addOnPersist method.

When the enablePersistence property is set to true, the Gantt features such as column template, column formatter, header text, and value accessor will not persist.

The example below shows how to prevent Gantt columns from being persisted. In the dataBound event, override the addOnPersist method and remove Columns from the persistence key list.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttComponent, GanttModule, ToolbarService, EditService } from '@syncfusion/ej2-angular-gantt';
import { TaskFieldsModel, ColumnModel } from '@syncfusion/ej2-angular-gantt';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  providers: [ToolbarService, EditService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div style="margin-bottom: 16px;">
      <button ejs-button id="add" style="margin-right: 8px;" (click)="addColumn()">Add Column</button>
      <button ejs-button id="remove" (click)="removeColumn()">Remove Column</button>
    </div>
    <ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" enablePersistence="true" (dataBound)="onDataBound()">
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') ganttInstance!: GanttComponent;
  public data: object[] = [];
  public taskSettings: TaskFieldsModel = {};
  public columns: ColumnModel[] = [];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.columns = [
      { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 120 },
      { field: 'TaskName', headerText: 'Task Name', width: 150 },
      { field: 'StartDate', headerText: 'Start Date', width: 150 },
      { field: 'Duration', headerText: 'Duration', width: 150 },
      { field: 'Progress', headerText: 'Progress', width: 150 }
    ];
  }

  public onDataBound(): void {
    const originalPersist = (this.ganttInstance as any).addOnPersist;
    (this.ganttInstance as any).addOnPersist = (keys: string[]): string[] => {
      const filteredKeys = keys.filter(key => key !== 'columns');
      return originalPersist.call(this.ganttInstance, filteredKeys);
    };
  }

  public addColumn(): void {
    const newColumn : ColumnModel = {
      field: 'Progress',
      headerText: 'Progress',
      width: 100
    };
    (this.ganttInstance.columns as ColumnModel[]).push(newColumn);
    this.ganttInstance.refresh();
  }

  public removeColumn(): void {
    this.ganttInstance.columns.pop();
    this.ganttInstance.refresh();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Add to persist

Persistence in the Syncfusion® Angular Gantt component enables storing and restoring the component state. It supports preserving column layout, sorting, filtering, and configuration elements such as column templates, header templates, and header text, ensuring consistent behavior across sessions.

Add a new column in persisted columns list

When enablePersistence is set to true in the Syncfusion Gantt component, column configurations are saved automatically. To add a new column to the persisted list, update the column collection using columns.push(), then call the refreshColumns method on the treeGrid object in the Gantt instance to update the UI.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttComponent, GanttModule, ToolbarService, EditService } from '@syncfusion/ej2-angular-gantt';
import { TaskFieldsModel, ColumnModel } from '@syncfusion/ej2-angular-gantt';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  providers: [ToolbarService, EditService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <div style="margin-bottom: 16px;">
      <button ejs-button id="add" style="margin-right: 8px;" (click)="addColumn()">Add Column</button>
      <button ejs-button id="remove" (click)="removeColumn()">Remove Column</button>
    </div>
    <ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" enablePersistence="true" (dataBound)="onDataBound()">
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') ganttInstance!: GanttComponent;
  public data: object[] = [];
  public taskSettings: TaskFieldsModel = {};
  public columns: ColumnModel[] = [];

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
    this.columns = [
      { field: 'TaskID', headerText: 'Task ID', textAlign: 'Right', width: 120 },
      { field: 'TaskName', headerText: 'Task Name', width: 150 },
      { field: 'StartDate', headerText: 'Start Date', width: 150 },
      { field: 'Duration', headerText: 'Duration', width: 150 },
      { field: 'Progress', headerText: 'Progress', width: 150 }
    ];
  }

  public onDataBound(): void {
    const originalPersist = (this.ganttInstance as any).addOnPersist;
    (this.ganttInstance as any).addOnPersist = (keys: string[]): string[] => {
      const filteredKeys = keys.filter(key => key !== 'columns');
      return originalPersist.call(this.ganttInstance, filteredKeys);
    };
  }

  public addColumn(): void {
    const newColumn : ColumnModel = {
      field: 'Progress',
      headerText: 'Progress',
      width: 100
    };
    (this.ganttInstance.columns as ColumnModel[]).push(newColumn);
    this.ganttInstance.refresh();
  }

  public removeColumn(): void {
    this.ganttInstance.columns.pop();
    this.ganttInstance.refresh();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Persist the header template and header Text

By default, properties such as column template, header text, header template, formatter, and value accessor are not persisted when enablePersistence is set to true, as these are defined at the application level.

To persist these settings, clone the Columns property using Object.assign, store it manually along with the persisted data, and reassign it to the Gantt’s Columns property during restoration.

import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttModule, GanttComponent, ToolbarService, EditService } from '@syncfusion/ej2-angular-gantt';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule , ButtonModule],
  providers: [ToolbarService, EditService],
  encapsulation: ViewEncapsulation.None,
  template: `
    <button ejs-button style="margin-bottom:20px" id="restore" (click)="clickHandler()">Restore</button>
    <ejs-gantt id="ganttDefault" #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [enablePersistence]='true' [splitterSettings]="splitterSettings">
      <e-columns>
        <e-column field="TaskID" width="90" textAlign="Right"></e-column>
        <e-column field="TaskName" width="290">
          <ng-template #headerTemplate>
            <div style="width: 20px; height: 20px;">Tasks Name</div>
          </ng-template>
        </e-column>
        <e-column field="StartDate" width="390" format="yMd" textAlign="Right"></e-column>
        <e-column field="Duration" width="120" textAlign="Right"></e-column>
        <e-column field="Progress" width="120" textAlign="Right"></e-column>
      </e-columns>
    </ejs-gantt>`
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  public data: object[] = [];
  public taskSettings: object = {};
  public splitterSettings: object = { columnIndex: 2 };

  ngOnInit(): void {
    this.data = [
      { TaskID: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 50 },
      { TaskID: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
      { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 },
      { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 50 }
    ];

    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      parentID: 'ParentID'
    };
  }

  public clickHandler(): void {
    const savedProperties = JSON.parse((this.ganttInstance as GanttComponent).getPersistData());
    const gridColumnsState = [...(this.ganttInstance as GanttComponent).ganttColumns];
    savedProperties.columns.forEach((col: any) => {
      const state = gridColumnsState.find((c: any) => c.field === col.field);
      if (state) {
        col.headerText = 'Text Changed';
        col.template = state.template;
        col.headerTemplate = state.headerTemplate;
      }
    });
    (this.ganttInstance as GanttComponent).treeGrid.setProperties(savedProperties);
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));