Change header text dynamically in Angular TreeGrid component

25 Aug 20254 minutes to read

You can change the column headerText dynamically through an external button.

Follow the steps below to change the header text dynamically:

Step 1:

Get the column object corresponding to the field name by using the getColumnByField method.
Then change the header Text value.

/** Get the JSON object of the column corresponding to the field name */
const column = this.treegridObj.getColumnByField("Duration");
/** Assign a new header text to the column */
column.headerText = "Changed Text";

Step 2:

Invoke the refreshColumns method to apply and reflect the changes in the TreeGrid header.

this.treegridObj.refreshColumns();

app.component.ts

import { NgModule,ViewChild } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid'
import { PageService, SortService, FilterService } from '@syncfusion/ej2-angular-treegrid'
import {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'



import { Component, OnInit, ViewChild } from '@angular/core';
import { projectData } from './datasource';
import { Column, TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
        
        TreeGridModule,
        ButtonModule,
        DropDownListAllModule
    ],

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    template: `<button #btn1 ejs-button cssClass="e-flat" [isToggle]="true"  (click)="click()">Change Header Text</button>

    <ejs-treegrid #treegridObj [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [treeColumnIndex]='1' [height]='210'>
        <e-columns>
            <e-column field='TaskID' headerText='Task ID' width='70' textAlign='Right'></e-column>
            <e-column field='TaskName' headerText='Task Name' width='100' ></e-column>
            <e-column field='StartDate' headerText='Start Date' width='90' format="yMd" textAlign='Right'></e-column>
            <e-column field='EndDate' headerText='End Date' width='90' format="yMd" textAlign='Right'></e-column>
            <e-column field='Duration' headerText='Duration' width='90' textAlign='Right'></e-column>
            <e-column field='Priority' headerText='Priority' width='90'></e-column>
        </e-columns>
    </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data: Object[] = [];
    @ViewChild('treegridObj')
    public treegridObj?: TreeGridComponent;

    ngOnInit(): void {
        this.data = projectData;
    }
    click() {
        const column = this.treegridObj?.getColumnByField('Duration'); // get the JSON object of the column corresponding to the field name
        (column as Column).headerText = 'Changed Text'; // assign a new header text to the column
        this.treegridObj?.refreshColumns();
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

For additional details, refer to the Angular TreeGrid feature tour page. Visit the Angular TreeGrid example to learn more about presenting and manipulating data.