Render other component in a column in Angular TreeGrid component

27 Aug 20254 minutes to read

Custom components can be rendered in a TreeGrid column using the template property.

Initialize the column template for the desired custom component. The template property will render the specified component inside the column.

In the sample below, a DropDownList is rendered in the Priority column.

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 { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
import { DropDownListComponent } from '@syncfusion/ej2-angular-dropdowns';

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

providers: [PageService,
                SortService,
                FilterService],
standalone: true,
    selector: 'app-container',
    template: `<ejs-treegrid #treegridObj [dataSource]='data' idMapping='TaskID' parentIdMapping='parentID' [treeColumnIndex]='1' [height]='315' >
        <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' textAlign='Right' [format]='formatOptions' width='90'></e-column>
            <e-column field='EndDate' headerText='End Date' textAlign='Right' [format]='formatOptions' width='90'></e-column>
            <e-column field='Duration' headerText='Duration' width='90' textAlign='Right'></e-column>
            <e-column  headerText='Priority' width='90'>
             <ng-template #template let-data>
             <div>
              <ejs-dropdownlist value='Normal' [dataSource]='dropData' (change)='onChange($event)' >
              </ejs-dropdownlist>
             </div>
            </ng-template>
            </e-column>
        </e-columns>
    </ejs-treegrid>`,
})
export class AppComponent implements OnInit {

    public data: Object[] = [];
    public formatOptions?: Object;
    public dropData?: string[];

    ngOnInit(): void {
        this.data = projectData;
        this.formatOptions = { format: 'y/M/d', type: 'date' };
        this.dropData = ['Normal', 'Low', 'High', 'Critical', 'Breaker'];
    }
    public onChange(args: any): void {
     /** Event will trigger when you have change the value in dropdown column */
     alert(args.value);
    }
}

main.ts

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

For more feature information, see the Angular TreeGrid feature tour page. Practical examples for rendering and manipulating data can be found in the Angular TreeGrid example.