Column headers in Angular Gantt component

13 Oct 202524 minutes to read

The Angular Gantt component provides flexible options to manage and customize column headers. You can define static header text, apply custom templates, align header content, and even update header titles dynamically through events or methods. These features help tailor the Gantt chart to match specific UI requirements and improve readability.

Set custom header text

By default, column headers in the Gantt chart display the value defined in the field property. To customize the header title, use the headerText property within the e-column configuration. This allows you to define meaningful labels for each column as needed.

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  template: `
    <ejs-gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings">
      <e-columns>
        <e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
        <e-column field="TaskName" headerText="Task Name" textAlign="Left" width="290"></e-column>
        <e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
        <e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
        <e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
      </e-columns>
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * TreeGrid DataSource
 */
export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    },
];

  • The headerText property is optional. If not defined, the column’s field value will be used as the header text by default.
  • To apply custom HTML content to the header cell, use the headerTemplate property.

Customize header using template

You can customize the column header in the Gantt chart using the headerTemplate property. This allows rendering custom HTML or Angular components within the header.

In this example, custom elements are applied to both the TaskName and Duration column headers.

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { projectNewData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  template: `
    <ejs-gantt height="370px" [dataSource]="data" [splitterSettings]="splitterSettings" [taskFields]="taskSettings">
      <e-columns>
        <e-column field="TaskName" width="290">
          <ng-template #headerTemplate>
            <div>
              <img src="../assets/images/TaskName.png" width="20" height="20" class="e-template"></ng-template>
            </div>
        </e-column>
        <e-column field="StartDate" headerText="Start Date" width="390" format="yMd" textAlign="Right"></e-column>
        <e-column field="Duration" headerText="Duration" width="120" textAlign="Right">
          <ng-template #headerTemplate>
            <div>
              <img src="../assets/images/Duration.png" width="20" height="20" class="e-template"></ng-template>
            </div>
        </e-column>
        <e-column field="Progress" headerText="Progress" width="120" textAlign="Right"></e-column>
      </e-columns>
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;

  ngOnInit(): void {
    this.data = projectNewData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * TreeGrid DataSource
 */

export let projectNewData: Object[] = [
    {
        TaskID: 1,
        TaskName: 'Product Concept',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30 },
            { TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3 },
            {
                TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 2,
                Predecessor: '2', Progress: 30
            },
        ]
    },
    {
        TaskID: 5, TaskName: 'Concept Approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4',
        Indicators: [
            {
                'date': '04/10/2019',
                'name': '#briefing',
                'title': 'Product concept breifing',
            }
        ]
    },
    {
        TaskID: 6,
        TaskName: 'Market Research',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            {
                TaskID: 7,
                TaskName: 'Demand Analysis',
                StartDate: new Date('04/04/2019'),
                EndDate: new Date('04/21/2019'),
                subtasks: [
                    {
                        TaskID: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4,
                        Predecessor: '5', Progress: 30
                    },
                    { TaskID: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5' }
                ]
            },
            {
                TaskID: 10, TaskName: 'Competitor Analysis', StartDate: new Date('04/04/2019'), Duration: 4,
                Predecessor: '7, 8', Progress: 30
            },
            { TaskID: 11, TaskName: 'Product strength analsysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '9' },
            {
                TaskID: 12, TaskName: 'Research complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: '10',
                Indicators: [
                    {
                        'date': '04/20/2019',
                        'name': '#meeting',
                        'title': '1st board of directors meeting',
                    }
                ]
            }
        ]
    },
    {
        TaskID: 13,
        TaskName: 'Product Design and Development',
        StartDate: new Date('04/04/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            {
                TaskID: 14, TaskName: 'Functionality design', StartDate: new Date('04/04/2019'),
                Duration: 3, Progress: 30, Predecessor: '12'
            },
            { TaskID: 15, TaskName: 'Quality design', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '12' },
            { TaskID: 16, TaskName: 'Define Reliability', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30, Predecessor: '15' },
            { TaskID: 17, TaskName: 'Identifying raw materials', StartDate: new Date('04/04/2019'), Duration: 2, Predecessor: '15' },
            {
                TaskID: 18,
                TaskName: 'Define cost plan',
                StartDate: new Date('04/04/2019'),
                EndDate: new Date('04/21/2019'),
                subtasks: [
                    {
                        TaskID: 19, TaskName: 'Manufacturing cost', StartDate: new Date('04/04/2019'),
                        Duration: 2, Progress: 30, Predecessor: '17'
                    },
                    { TaskID: 20, TaskName: 'Selling cost', StartDate: new Date('04/04/2019'), Duration: 2, Predecessor: '17' }
                ]
            },
            {
                TaskID: 21,
                TaskName: 'Development of the final design',
                StartDate: new Date('04/04/2019'),
                EndDate: new Date('04/21/2019'),
                subtasks: [
                    {
                        TaskID: 22, TaskName: 'Defining dimensions and package volume', StartDate: new Date('04/04/2019'),
                        Duration: 2, Progress: 30, Predecessor: '19,20'
                    },
                    {
                        TaskID: 23, TaskName: 'Develop design to meet industry standards', StartDate: new Date('04/04/2019'),
                        Duration: 2, Predecessor: '22'
                    },
                    { TaskID: 24, TaskName: 'Include all the details', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '23' }
                ]
            },
            {
                TaskID: 25, TaskName: 'CAD Computer-aided design', StartDate: new Date('04/04/2019'),
                Duration: 3, Progress: 30, Predecessor: '24'
            },
            { TaskID: 26, TaskName: 'CAM Computer-aided manufacturing', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '25' },
            {
                TaskID: 27, TaskName: 'Design complete', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: '26',
                Indicators: [
                    {
                        'date': '05/18/2019',
                        'name': '#meeting',
                        'title': '2nd board of directors meeting',
                    }
                ]
            }

        ]
    },
    { TaskID: 28, TaskName: 'Prototype Testing', StartDate: new Date('04/04/2019'), Duration: 4, Progress: 30, Predecessor: '27' },
    { TaskID: 29, TaskName: 'Include feedback', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '28ss' },
    { TaskID: 30, TaskName: 'Manufacturing', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30, Predecessor: '28,29' },
    { TaskID: 31, TaskName: 'Assembling materials to finsihed goods', StartDate: new Date('04/04/2019'), Duration: 5, Predecessor: '30' },
    {
        TaskID: 32,
        TaskName: 'Feedback and Testing',
        StartDate: new Date('04/04/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            {
                TaskID: 33, TaskName: 'Internal testing and feedback', StartDate: new Date('04/04/2019'),
                Duration: 3, Progress: 45, Predecessor: '31'
            },
            {
                TaskID: 34, TaskName: 'Customer testing and feedback', StartDate: new Date('04/04/2019'),
                Duration: 3, Progress: 50, Predecessor: '33'
            }
        ]
    },
    {
        TaskID: 35,
        TaskName: 'Final Product Development',
        StartDate: new Date('04/04/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            {
                TaskID: 36, TaskName: 'Important improvements', StartDate: new Date('04/04/2019'),
                Duration: 4, Progress: 30, Predecessor: '34'
            },
            {
                TaskID: 37, TaskName: 'Address any unforeseen issues', StartDate: new Date('04/04/2019'),
                Duration: 4, Progress: 30, Predecessor: '36ss'
            }
        ]
    },
    {
        TaskID: 38,
        TaskName: 'Final Product',
        StartDate: new Date('04/04/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 39, TaskName: 'Branding product', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '37' },
            {
                TaskID: 40, TaskName: 'Marketing and presales', StartDate: new Date('04/04/2019'),
                Duration: 4, Progress: 30, Predecessor: '39'
            }
        ]
    }
];

  • The headerTemplate property is only applicable to Gantt columns that have a header element.

Align header text

You can align the column header text in the Syncfusion® Angular Gantt component using the headerTextAlign property. By default, the text is aligned to the left. The available alignment options are:

  • Left: Aligns text to the left (default).
  • Center: Aligns text to the center.
  • Right: Aligns text to the right.
  • Justify: Distributes text evenly across the header.
import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import {GanttModule, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ColumnModel, TextAlign } from '@syncfusion/ej2-angular-grids';
import { DropDownListModule, ChangeEventArgs } from '@syncfusion/ej2-angular-dropdowns';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, DropDownListModule],
  template: `
    <div style="display: flex">
      <label style="padding: 30px 17px 0 0;font-weight:bold">Align the text of header text :</label>
      <ejs-dropdownlist style="padding: 26px 0 0 0" index="0" width="100" [dataSource]="alignmentData" (change)="changeAlignment($event)">
      </ejs-dropdownlist>
    </div>
    <div style="padding-top:20px">
      <ejs-gantt #gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings">
        <e-columns>
          <e-column field="TaskID" headerText="Task ID" headerTextAlign="Right" width="110"></e-column>
          <e-column field="TaskName" headerText="Task Name" width="290"></e-column>
          <e-column field="StartDate" headerText="Start Date" width="120"></e-column>
          <e-column field="Duration" headerText="Duration" width="90"></e-column>
          <e-column field="Progress" headerText="Progress" width="120"></e-column>
        </e-columns>
      </ejs-gantt>
    </div>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;
  public alignmentData: Object[] = [
    { text: 'Left', value: 'Left' },
    { text: 'Right', value: 'Right' },
    { text: 'Center', value: 'Center' },
    { text: 'Justify', value: 'Justify' }
  ];

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }

  public changeAlignment(args: ChangeEventArgs): void {
    this.ganttInstance?.treeGrid.grid.columns.forEach((col: ColumnModel) => {
      col.headerTextAlign = args.value as TextAlign;
    });
    this.ganttInstance?.treeGrid.refreshHeader();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * TreeGrid DataSource
 */
export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    },
];

  • The headerTextAlign property only changes the alignment of the text in the column header, and not the content of the column. If you want to align both the column header and content, you can use the textAlign property.

Enable header text wrapping

You can enable autowrap in the Syncfusion® Angular Gantt component to allow cell content to wrap onto the next line when it exceeds the defined column width. This wrapping behavior is based on the whitespace between words. To activate this feature, set the allowTextWrap property to true and specify an appropriate column width.

The wrapping behavior is defined using the textWrapSettings.wrapMode property of the treeGrid object. Available options include:

  • Header: Wraps only the header text.
  • Content: Wraps only the cell content.
  • Both: Wraps both header and content (default).
  • If column width is not defined, autowrap adjusts based on the overall Gantt chart width.
  • Header text without white space may not wrap.
  • If cell content includes HTML tags, autowrap may not function as expected. In such cases, use headerTemplate and template properties to customize the header and cell layout.
import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import {GanttModule, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
import { WrapMode } from '@syncfusion/ej2-angular-grids';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, DropDownListModule],
  template: `
    <div style="display: flex">
      <label style="padding: 30px 17px 0 0;font-weight:bold">Autowrap for header column :</label>
      <ejs-dropdownlist style="padding: 26px 0 0 0" index="0" width="100"
        [dataSource]="dropdownData" (change)="valueChange($event)">
      </ejs-dropdownlist>
    </div>
    <div style="padding-top:20px">
      <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" (load)="load()">
        <e-columns>
          <e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
          <e-column field="TaskName" headerText="Task Name" textAlign="Left" width="250"></e-column>
          <e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
          <e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
          <e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
        </e-columns>
      </ejs-gantt>
    </div>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;
  public dropdownData: Object[] = [
    { text: 'Header', value: 'Header' },
    { text: 'Content', value: 'Content' },
    { text: 'Both', value: 'Both' }
  ];

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }

  public load(): void {
    if (this.ganttInstance) {
      this.ganttInstance.treeGrid.textWrapSettings.wrapMode = 'Header';
      this.ganttInstance.treeGrid.allowTextWrap = true;
    }
  }

  public valueChange(args: ChangeEventArgs): void {
    (this.ganttInstance as GanttComponent).treeGrid.textWrapSettings.wrapMode = args.value as WrapMode;
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * TreeGrid DataSource
 */
export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    },
];

Adjust header height

To customize the Gantt header height for displaying full content such as long text or images, apply changes using CSS or dynamic method.

Using css:

You can override the default height by targeting .e-gantt .e-headercell:

.e-gantt .e-headercell {
  height: 130px;
}

Using method:

To change the height dynamically, use the getHeaderContent method to access the header, then loop through each .e-headercell and set the desired height.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonModule],
  template: `
    <div style="margin-bottom: 16px;">
      <button ejs-button id="small" cssClass="e-small" style="margin-right: 8px;" (click)="changeHeaderHeight($event)">
        Change height 20px
      </button>
      <button ejs-button id="medium" cssClass="e-small" style="margin-right: 8px;" (click)="changeHeaderHeight($event)">
        Default height 42px
      </button>
      <button ejs-button id="big" cssClass="e-small" (click)="changeHeaderHeight($event)">
        Change height 60px
      </button>
    </div>
    <div style="padding-top:20px">
      <ejs-gantt #gantt [dataSource]="data" height="430" [taskFields]="taskSettings" [splitterSettings]="splitterSettings">
        <e-columns>
          <e-column field="TaskID" headerText="Task ID" width="100"></e-column>
          <e-column field="TaskName" headerText="Task Name" width="290"></e-column>
          <e-column field="Duration" headerText="Duration" width="90"></e-column>
          <e-column field="Progress" headerText="Progress" width="120"></e-column>
        </e-columns>
      </ejs-gantt>
    </div>`,
  encapsulation: ViewEncapsulation.None
})

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

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }

  public changeHeaderHeight(event: MouseEvent): void {
    const heightMap: { [key: string]: string } = {
      small: '20px',
      medium: '42px',
      big: '60px'
    };
    const headerCells = this.ganttInstance?.treeGrid.getHeaderContent().querySelectorAll('.e-headercell');
    headerCells?.forEach((headerCell: Element) => {
      (headerCell as HTMLElement).style.height = heightMap[(event.target as HTMLButtonElement).id];
    });
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * TreeGrid DataSource
 */
export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    },
];

  • You can also use the getHeaderTable method of treeGrid object in gantt instance to get the table element of the header, and then adjust the height.

Update header text dynamically

The Angular Gantt component allows dynamic updates to column header text, either through events or method calls. This is useful for customizing headers based on user input or application logic.

Using Event

To modify header text during rendering, use the headerCellInfo event. After updating the text, call the refreshHeader method of the treeGrid object to apply changes.

Using method

You can also change header text programmatically using the following methods:

  • getColumnByField: Returns the column object by field name.
  • getColumnHeaderByField: Returns the header element by field name.
  • getColumnIndexByField: Returns the column index by field name.
  • getColumnByUid: Returns the column object by UID.
  • getColumnHeaderByIndex: Returns the header element by index.
  • getColumnIndexByUid: Returns the column index by UID.
  • getColumnHeaderByUid: Returns the header element by UID.

These methods allow access to the column or header element, where you can update the headerText or textContent as needed.

  • After modifying header text, call refreshHeader to reflect the changes.
  • Column UID’s are auto-generated and may change when the chart is refreshed

Here is an example of how to change the header text of a column using the getColumnByField method:

import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { GanttModule, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { DropDownListModule, DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';
import { TextBoxModule, TextBoxComponent } from '@syncfusion/ej2-angular-inputs';
import { GanttData } from './data';
import { ButtonAllModule } from '@syncfusion/ej2-angular-buttons';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, DropDownListModule, TextBoxModule, ButtonAllModule],
  template: `
    <div style="display: flex; margin-bottom: 20px;">
      <label style="padding: 30px 20px 0 0; font-weight: bold;">Select column name :</label>
      <ejs-dropdownlist #dropdown style="padding: 26px 0 0 0;" index="0" width="220" [dataSource]="columnsdata">
      </ejs-dropdownlist>
    </div>
    <div style="margin-top: 20px;">
      <label style="padding: 30px 17px 0 0; font-weight: bold;">Enter new header text :</label>
      <ejs-textbox #textbox required placeholder="Enter new header text" width="220">
      </ejs-textbox>
      <button ejs-button id="buttons" (click)="ChangeHeaderText()" style="margin-left: 8px;">Change</button>
    </div>
    <div style="padding: 20px 17px 0 0">
      <ejs-gantt id="ganttDefault" #gantt height="430px" [dataSource]="data"
        [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings">
        <e-columns>
          <e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
          <e-column field="TaskName" headerText="Task Name" textAlign="Left" width="290"></e-column>
          <e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
          <e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
          <e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
        </e-columns>
      </ejs-gantt>
    </div>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  @ViewChild('dropdown') public dropDownInstance?: DropDownListComponent;
  @ViewChild('textbox') public textBoxInstance?: TextBoxComponent;
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;
  public columnsdata: Object[] = [
    { text: 'TaskID', value: 'TaskID' },
    { text: 'TaskName', value: 'TaskName' },
    { text: 'Duration', value: 'Duration' },
    { text: 'Progress', value: 'Progress' }
  ];

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }

  public ChangeHeaderText(): void {
    const newText = this.textBoxInstance?.element.value.trim();
    const selectedField = this.dropDownInstance?.value as string;
    if (newText && selectedField && this.ganttInstance) {
      const column = (this.ganttInstance as GanttComponent).treeGrid.grid.getColumnByField(selectedField);
      column.headerText = newText;
      this.ganttInstance.treeGrid.refreshHeader();
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * TreeGrid DataSource
 */
export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    },
];

Changing the header text of all columns:

To modify the header text of all columns in the Gantt component, iterate through the columns collection and set the headerText property for each column. This approach ensures consistent customization across all headers.

import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { GanttModule, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ColumnModel } from '@syncfusion/ej2-angular-grids';
import { ButtonAllModule } from '@syncfusion/ej2-angular-buttons';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonAllModule],
  template: `
    <div style="margin-bottom: 20px;">
      <button ejs-button cssClass="e-success" (click)="changeHeaderText()">Change Header Text</button>
    </div>
    <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings">
      <e-columns>
        <e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
        <e-column field="TaskName" headerText="Task Name" textAlign="Left" width="290"></e-column>
        <e-column field="StartDate" headerText="StartDate" textAlign="Right" width="120"></e-column>
        <e-column field="Duration" headerText="Duration" textAlign="Right" width="150"></e-column>
        <e-column field="Progress" headerText="Progress" textAlign="Right" width="150"></e-column>
      </e-columns>
    </ejs-gantt>`,
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public ganttInstance?: GanttComponent;
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;
  public headerTextMap: { [key: string]: string } = {
    TaskID: 'ID',
    TaskName: 'Name',
    StartDate: 'Start Date',
    Duration: 'Task Duration',
    Progress: 'Task Progress'
  };

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }

  public changeHeaderText(): void {
    this.ganttInstance?.treeGrid.grid.columns.forEach((column: ColumnModel) => {
      column.headerText = this.headerTextMap[column.field as string];
    });
    this.ganttInstance?.treeGrid.refreshHeader();
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * TreeGrid DataSource
 */
export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    },
];

Rotate header text

By default, header text in the Syncfusion® Gantt component is displayed horizontally. To rotate it vertically, diagonally, or at a custom angle, follow the steps below using the customAttributes property of the column.

Step 1: Create a CSS class with rotation styles.

.e-gantt .e-headercell.orientationcss  {
  transform: rotate(90deg);
}

Step 2: Apply the CSS class to the desired column using customAttributes.

 <e-column field='Duration' headerText='Duration' textAlign='Center' width=90  [customAttributes]='customAttributes'></e-column>

Step 3: Adjust the header cell height to fit the rotated text.

public setHeaderHeight(args) {
    let textWidth: number = document.querySelector('.orientationcss > div').scrollWidth;//Obtain the width of the headerText content.
    let headerCell: NodeList = document.querySelectorAll('.e-headercell');
    for(let i: number = 0; i < headerCell.length; i++) {
        (<HTMLElement>headerCell.item(i)).style.height = textWidth + 'px'; //Assign the obtained textWidth as the height of the headerCell.
    }
}
import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { GanttModule, GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  template: `
    <ejs-gantt #gantt [height]="240" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" (created)="setHeaderHeight()">
      <e-columns>
        <e-column field="TaskID" headerText="Task ID" width="90"></e-column>
        <e-column field="TaskName" headerText="Task Name" width="290"></e-column>
        <e-column field="Duration" headerText="Duration" textAlign="Center" width="90"
          [customAttributes]="customAttributes"></e-column>
        <e-column field="Progress" headerText="Progress" width="120"></e-column>
      </e-columns>
    </ejs-gantt>`,
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('gantt') public gantt?: GanttComponent;
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;
  public customAttributes?: object;

  ngOnInit(): void {
    this.data = GanttData;
    this.customAttributes = { class: 'orientationcss' };
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }

  public setHeaderHeight(): void {
    const textElement = document.querySelector('.orientationcss > div');
    if (textElement) {
      const textWidth = textElement.scrollWidth;
      const headerCells = document.querySelectorAll('.e-headercell');
      headerCells.forEach((cell) => {
        (cell as HTMLElement).style.height = `${textWidth + 500}px`;
      });
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
.e-gantt .e-headercell.orientationcss  {
  transform: rotate(90deg);
}
/**
 * TreeGrid DataSource
 */
export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    },
];

Localize header text using ngx-translate

The ngx-translate library provides internationalization (i18n) and localization (l10n) support for Angular applications. With ngx-translate, you can easily translate your Angular application into multiple languages.

In the context of the Syncfusion® Angular Gantt chart component, you can use ngx-translate to translate the header text of the Gantt chart’s columns. There are two ways to achieve this: through header text and through header template.

Through header text

To translate the header text of the Gantt chart’s columns using ngx-translate through header text, you can use the translate pipe for the headerText property.

Step 1: Create and Configure the TranslateService

import { Component, ViewChild } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(public translate: TranslateService) { }

  changeLang(lang: string) {
    this.translate.use(lang);

    setTimeout(
      function (this: GanttComponent) {
        this.refresh();
      }.bind(this.gantt),
      800
    );
  }

  @ViewChild(GanttComponent, { static: true })
  public gantt!: GanttComponent;
  public flag: boolean = true;
  public data: Object[] = [];

  public taskSettings?: object;
  public splitterSettings?: object;
  ngOnInit(): void {
    this.data = [
      {
        TaskID: 1,
        TaskName: 'Identify Site location',
        StartDate: new Date('04/02/2019'),
        lineId: 5,
        start: 'Reims',
        destination: 'France',
        Duration: 4,
        Progress: 50
      },
      {
        TaskID: 2,
        TaskName: 'Perform Soil test',
        lineId: 6,
        start: 'Münster',
        destination: 'Germany',
        StartDate: new Date('04/02/2019'),
        Duration: 4,
        Progress: 50
      },
      {
        TaskID: 3, TaskName: 'Soil test approval',
        lineId: 2,
        start: 'Rio de Janeiro',
        destination: 'Brazil',
        StartDate: new Date('04/02/2019'),
        Duration: 4,
        Progress: 50
      }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      lineID: 'lineID',
      start: 'start',
      destination: 'destination'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }
}

Step 2: Import the TranslateModule and TranslateLoader in your app.module.ts file. You also need to import the HttpClientModule to enable HTTP requests for loading translation files

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';
import { GridAllModule } from '@syncfusion/ej2-angular-grids';
import { CommonModule } from '@angular/common';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttAllModule } from '@syncfusion/ej2-angular-gantt';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    HttpClientModule,
    BrowserModule,
    GridAllModule,
    GanttModule,
    CommonModule,
    GanttAllModule,
    ButtonModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient],
      },
      defaultLanguage: '',
    }),  
  ],
  
  bootstrap: [AppComponent],
})
export class AppModule {}

In the above code, we import the required modules and define a function called HttpLoaderFactory that returns an instance of TranslateHttpLoader, which is used to load translation files.

Step 3: Use the translate pipe in your HTML code to translate the headerText of the column.

<h1> Ngx translate pipe for header text in Angular Gantt component</h1>
<h1></h1>
<div class="container-fluid py-3">
  <div class="btn-group btn-group-sm py-5">
    <button (click)="changeLang('en-US')" style="margin-left:5px">EN</button>
    <button (click)="changeLang('de-DE')" style="margin-left:5px">DE</button>
    <button (click)="changeLang('pt-BR')" style="margin-left:5px">BR</button>
  </div>
</div>
<ejs-gantt #gantt height="430px"  [dataSource]="data"
        [taskFields]="taskSettings"  [splitterSettings] = "splitterSettings">    
        <e-columns>
          <e-column field="TaskID" headerText="TaskID" width="120" textAlign="Right"></e-column>
          <e-column field="TaskName" headerText="TaskName" width="120" textAlign="Right">
          </e-column>
          <e-column field="lineId" headerText="{{ 'Line' | translate }}" width="120">
          </e-column>
          <e-column field="start" headerText="{{ 'Start' | translate }}" width="140">
          </e-column>
          <e-column field="destination" headerText="{{ 'Destination' | translate }}" width="170"> </e-column>
        </e-columns>
</ejs-gantt>

Step 4: Then add the json file with the translation text in the required languages,

en-US.json { 
    "changeLanguage": "Change Language",
    "Line": "Line",
    "Start": "Start",
    "Destination": "Destination"
}
de-DE.json { 
    "changeLanguage": "Ändere Sprache",
    "Line": "Linie",
    "Start": "Startpunkt",
    "Destination": "Zielpunkt"
}
pt-BR.json { 
    "changeLanguage": "Change Language",
    "Line": "ligne",
    "Start": "debut",
    "Destination": "destination"
}

Through header template

To translate the header text of the Gantt chart’s columns using ngx-translate through header template, you can use the translate pipe in the header templates of the Gantt component.

Here are the steps to use ngx-translate pipe for Gantt’s header template in Angular Gantt chart component:

Step 1: Create and Configure the TranslateService

import { Component, ViewChild } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(public translate: TranslateService) { }

  changeLang(lang: string) {
    this.translate.use(lang);

    setTimeout(
      function (this: GanttComponent) {
        this.refresh();
      }.bind(this.gantt),
      800
    );
  }

  @ViewChild(GanttComponent, { static: true })
  public gantt!: GanttComponent;
  public flag: boolean = true;
  public data: Object[] = [];

  public taskSettings?: object;
  public splitterSettings?: object;
  ngOnInit(): void {
    this.data = [
      {
        TaskID: 1,
        TaskName: 'Identify Site location',
        StartDate: new Date('04/02/2019'),
        lineId: 5,
        start: 'Reims',
        destination: 'France',
        Duration: 4,
        Progress: 50
      },
      {
        TaskID: 2,
        TaskName: 'Perform Soil test',
        lineId: 6,
        start: 'Münster',
        destination: 'Germany',
        StartDate: new Date('04/02/2019'),
        Duration: 4,
        Progress: 50
      },
      {
        TaskID: 3, TaskName: 'Soil test approval',
        lineId: 2,
        start: 'Rio de Janeiro',
        destination: 'Brazil',
        StartDate: new Date('04/02/2019'),
        Duration: 4,
        Progress: 50
      }
    ];
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      lineID: 'lineID',
      start: 'start',
      destination: 'destination'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }
}

Step 2: Import the required modules in app.module.ts file along with translate loader function,

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';
import { GridAllModule } from '@syncfusion/ej2-angular-grids';
import { CommonModule } from '@angular/common';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttAllModule } from '@syncfusion/ej2-angular-gantt';

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    HttpClientModule,
    BrowserModule,
    GridAllModule,
    GanttModule,
    CommonModule,
    GanttAllModule,
    ButtonModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient],
      },
      defaultLanguage: '',
    }),  
  ],
  
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 3: Use the ngx-translate pipe in your Angular Gantt chart component header templates to translate the headers dynamically.

<h1> Ngx translate pipe for header template in Angular Gantt component</h1>
<h1></h1>
<div class="container-fluid py-3">
  <div class="btn-group btn-group-sm py-5">
    <button (click)="changeLang('en-US')" style="margin-left:5px">EN</button>
    <button (click)="changeLang('de-DE')" style="margin-left:5px">DE</button>
    <button (click)="changeLang('pt-BR')" style="margin-left:5px">BR</button>
  </div>
</div>
<div style="padding:20px 0px 0px 0px">
  <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [splitterSettings]="splitterSettings">
  <e-columns>
    <e-column field="TaskID" headerText="TaskID" width="120" textAlign="Right"></e-column>
    <e-column field="TaskName" headerText="TaskName" width="120" textAlign="Right"></e-column>
    <e-column field='lineId' headerText='Line' width=90>
      <ng-template #headerTemplate let-data>
        <div>
          {{ 'Line' | translate }}
        </div>
      </ng-template>
    </e-column>
    <e-column field='start' headerText='Start' width=120>
      <ng-template #headerTemplate let-data>
        <div>
          {{ 'Start' | translate }}
        </div>
      </ng-template>
    </e-column>
    <e-column field='destination' headerText='Destination' width=80>
      <ng-template #headerTemplate let-data>
        <div>
          {{ 'Destination' | translate }}
        </div>
      </ng-template>
    </e-column>
  </e-columns>
</ejs-gantt>
<div>

Step 4: Then add the json file with the translation text in the required languages,

en-US.json { 
    "changeLanguage": "Change Language",
    "Line": "Line",
    "Start": "Start",
    "Destination": "Destination"
}
de-DE.json { 
    "changeLanguage": "Ändere Sprache",
    "Line": "Linie",
    "Start": "Startpunkt",
    "Destination": "Zielpunkt"
}
pt-BR.json { 
    "changeLanguage": "Change Language",
    "Line": "ligne",
    "Start": "debut",
    "Destination": "destination"
}

Add custom tooltip to header

You can display additional information in the Syncfusion® Angular Gantt component by adding custom tooltips to column headers. This is especially helpful when space is limited or when extra context is needed. To implement this, use the beforeRender event of the Tooltip component. This event triggers before each header cell is rendered, allowing you to assign a custom tooltip dynamically.

The following example demonstrates how to use the beforeRender event to add a tooltip to a header cell:

import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import {TooltipAllModule, TooltipComponent, TooltipEventArgs } from "@syncfusion/ej2-angular-popups";
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, TooltipAllModule],
  template: `
    <div class="control-section">
      <ejs-tooltip #tooltip (beforeRender)="beforeRender($event)" target=".e-headertext">
        <ejs-gantt #gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings">
          <e-columns>
            <e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
            <e-column field="TaskName" headerText="Task Name" textAlign="Left" width="290"></e-column>
            <e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
            <e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
            <e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
          </e-columns>
        </ejs-gantt>
      </ejs-tooltip>
    </div>`
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  @ViewChild('tooltip') public toolTip?: TooltipComponent;
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;
  public columnDescriptions: { [key: string]: string } = {
    'Task ID': 'A unique ID for the task.',
    'Task Name': 'The name of the task.',
    'Start Date': 'The starting date of the task.',
    'Duration': 'The total duration of the task.',
    'Progress': 'The current task progress.'
  };

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }

  public beforeRender(args: TooltipEventArgs): void {
    const description = this.columnDescriptions[args.target.innerText];
    if (description && this.toolTip) {
      this.toolTip.content = `${args.target.innerText}: ${description}`;
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * TreeGrid DataSource
 */
export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    },
];

  • The headerCellInfo event can also be used to customize the header tooltip. This event is triggered for each header cell after it is rendered.

Style header text

To modify the appearance of column headers in the Gantt, follow the steps below. You can use CSS, properties, methods, or events provided by the Syncfusion® Angular Gantt component.

Using CSS

You can apply styles to Gantt component header cells using the .e-headercell class. This allows you to customize font, background color, and other visual properties.

  .e-gantt .e-headercell {
    background-color: #a2d6f4;
    color:rgb(3, 2, 2);
  }
import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { GanttComponent, GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  template: `
    <ejs-gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings">
      <e-columns>
        <e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
        <e-column field="TaskName" headerText="Task Name" textAlign="Left" width="290"></e-column>
        <e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
        <e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
        <e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
      </e-columns>
    </ejs-gantt>`,
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})

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

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }
}
.e-gantt .e-headercell {
  background-color: #a2d6f4;
  color:rgb(3, 2, 2);
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * TreeGrid DataSource
 */
export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    },
];

Using property

To customize the appearance of column headers in the Gantt component, use the customAttributes property. It accepts an object containing CSS class names that apply styles directly to header cells.

Step 1: Define a CSS class with the desired styles.

.e-gantt .e-headercell.customcss {
  background-color: rgb(43, 205, 226);
  color: black;
}

Step 2: Assign the class using customAttributes in the column definition.

<e-column field='TaskName' headerText='Task Name' textAlign='Left' width=290 [customAttributes]="{ class: 'customcss' }"></e-column>

The following example demonstrates how to style the TaskName and Duration column headers using custom attributes.

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  template: `
    <ejs-gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings">
      <e-columns>
        <e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
        <e-column field="TaskName" headerText="Task Name" textAlign="Left" width="290" [customAttributes]="{ class: 'customcss' }"></e-column>
        <e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
        <e-column field="Duration" headerText="Duration" textAlign="Right" width="90" [customAttributes]="{ class: 'customcss' }"></e-column>
        <e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
      </e-columns>
    </ejs-gantt>
  `,
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }
}
.e-gantt .e-headercell.customcss {
  background-color: rgb(43, 205, 226);
  color: black;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * TreeGrid DataSource
 */
export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    },
];

Using method

The Syncfusion® Gantt component provides methods in the treeGrid object to customize column header appearance:

  • getColumnHeaderByIndex(index) – Gets the header element by column index.
  • getColumnHeaderByField(field) – Retrieves the header element using the field name.
  • getColumnHeaderByUid(uid) – Accesses the header element by unique ID.
  • getColumnIndexByField(field) – Returns the index of a column using its field name.
  • getColumnIndexByUid(uid) – Returns the index of a column using its unique ID.

The following example demonstrates how to apply custom styles to specific column headers in the Gantt chart using the dataBound event:

  • Set font color to black for the header at index 0 of the TaskID column.
  • Apply pink background and black font color to the TaskName header.
  • Apply the same styles to the Duration header using both UID (grid-column11) and index 3.
import { Component, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { GanttComponent, GanttModule } from '@syncfusion/ej2-angular-gantt';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  template: `
    <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" (dataBound)="dataBound()">
      <e-columns>
        <e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
        <e-column field="TaskName" headerText="Task Name" textAlign="Left" width="290"></e-column>
        <e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
        <e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
        <e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
      </e-columns>
    </ejs-gantt>
  `,
  encapsulation: ViewEncapsulation.None
})

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

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }

  public dataBound(): void {
    // Style by index.
    const headerByIndex = (this.ganttInstance as GanttComponent).treeGrid.getColumnHeaderByIndex(0);
    if (headerByIndex) (headerByIndex as HTMLElement).style.color = '#0d0b0b';

    // Style by field.
    const taskNameHeader = (this.ganttInstance as GanttComponent).treeGrid.getColumnHeaderByField('TaskName');
    if (taskNameHeader) {
      (taskNameHeader as HTMLElement).style.backgroundColor = '#f45ddeab';
      (taskNameHeader as HTMLElement).style.color = '#0d0b0b';
    }

    // Style by UID.
    const headerByUid = (this.ganttInstance as GanttComponent).treeGrid.getColumnHeaderByUid('grid-column3');
    if (headerByUid) {
      (headerByUid as HTMLElement).style.backgroundColor = '#f45ddeab';
      (headerByUid as HTMLElement).style.color = '#0d0b0b';
    }

    //Style by field index.
    const durationIndex = (this.ganttInstance as GanttComponent).treeGrid.getColumnIndexByField('Duration');
    const durationHeader = (this.ganttInstance as GanttComponent).treeGrid.getColumnHeaderByIndex(durationIndex);
    if (durationHeader) (durationHeader as HTMLElement).style.color = '#0d0b0b';

    // Style by UID index.
    const uidIndex = (this.ganttInstance as GanttComponent).treeGrid.getColumnIndexByUid('grid-column4');
    const uidHeader = (this.ganttInstance as GanttComponent).treeGrid.getColumnHeaderByIndex(uidIndex);
    if (uidHeader) (uidHeader as HTMLElement).style.color = '#0d0b0b';
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * TreeGrid DataSource
 */
export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    },
];

  • The UID is automatically generated by the Gantt chart component and may change whenever the gantt chart is refreshed or updated.

Using event

To customize the Gantt component header appearance, use the headerCellInfo event. This event triggers when each header cell is rendered and provides access to its details, allowing you to apply custom styles.

The following example demonstrates how to check if the current header column is the TaskID field and apply a CSS class conditionally:

import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Column, GanttModule } from '@syncfusion/ej2-angular-gantt';
import { HeaderCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { GanttData } from './data';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule],
  template: `
    <ejs-gantt height="370px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings" (headerCellInfo)="onHeaderCellInfo($event)">
      <e-columns>
        <e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
        <e-column field="TaskName" headerText="Task Name" textAlign="Left" width="290"></e-column>
        <e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
        <e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
        <e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
      </e-columns>
    </ejs-gantt>`,
  styles: [`
    .e-gantt .e-headercell.customcss {
      background-color: #a2d6f4;
      color: rgb(3, 2, 2);
    }
  `],
  encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
  public data?: object[];
  public taskSettings?: object;
  public splitterSettings?: object;

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }

  
  public onHeaderCellInfo(args: HeaderCellInfoEventArgs): void {
    const column = args.cell?.column as Column;
    if (column?.field === 'TaskID') {
        (args.node as HTMLElement).classList.add('customcss');
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * TreeGrid DataSource
 */
export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    },
];

Refresh header programmatically

To refresh the header in Syncfusion® Gantt component after updating column properties (such as text, width, or alignment), use the refreshHeader method from the treeGrid object. This method re-renders the header to reflect the latest column changes.

The following example demonstrates how to update the header text of the column at index 1 for the TaskName column using a button click.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GanttModule, ButtonModule],
  template: `
    <div style="margin-bottom: 20px;">
     <button ejs-button (click)="refreshHeader()">Refresh Header</button>
    </div>
    <ejs-gantt #gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [treeColumnIndex]="1" [splitterSettings]="splitterSettings">
      <e-columns>
        <e-column field="TaskID" headerText="Task ID" textAlign="Right" width="90"></e-column>
        <e-column field="TaskName" headerText="Task Name" textAlign="Left" width="290"></e-column>
        <e-column field="StartDate" headerText="Start Date" textAlign="Right" width="120"></e-column>
        <e-column field="Duration" headerText="Duration" textAlign="Right" width="90"></e-column>
        <e-column field="Progress" headerText="Progress" textAlign="Right" width="120"></e-column>
      </e-columns>
    </ejs-gantt> `,
  encapsulation: ViewEncapsulation.None
})

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

  ngOnInit(): void {
    this.data = GanttData;
    this.taskSettings = {
      id: 'TaskID',
      name: 'TaskName',
      startDate: 'StartDate',
      duration: 'Duration',
      progress: 'Progress',
      child: 'subtasks'
    };
    this.splitterSettings = {
      position: '75%'
    };
  }

  public refreshHeader(): void {
    const column = (this.ganttInstance as GanttComponent).treeGrid.grid.getColumnByIndex(1);
    if (column) {
      column.headerText = 'New Header Text';
      (this.ganttInstance as GanttComponent).treeGrid.refreshHeader();
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/**
 * TreeGrid DataSource
 */
export let GanttData: Object[]  = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50 },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
        ]
    },
];

  • The refreshHeader method updates only the gantt header and not the entire gantt chart.

Access header element

To retrieve the header element in a Syncfusion® Gantt chart component, you can use one of the following methods available in the treeGrid object of the Gantt instance:

  1. getHeaderContent: This method returns the header <div> element of the Gantt chart. You can use it to access the entire header content.

     const headerElement = this.gantt.treeGrid.getHeaderContent();

  2. getHeaderTable: This method returns the header <table> element of the Gantt chart. You can use it to access only the header table.

     const headerTableElement = this.gantt.treeGrid.getHeaderTable();

  3. getColumnHeaderByUid: This method returns the column header element by its unique identifier (UID).

     const columnHeaderElement = this.gantt.treeGrid.getColumnHeaderByUid("e-grid2");

  4. getColumnHeaderByIndex: This method returns the column header element by its index.

     const columnHeaderElement = this.gantt.treeGrid.getColumnHeaderByIndex(0);

  5. getColumnHeaderByField: This method returns the column header element by its field name.

     const columnHeaderElement = this.gantt.treeGrid.getColumnHeaderByField("TaskID");
  • The UID is automatically generated by the Gantt chart component and may change whenever the Gantt is refreshed or updated.