Template in Angular TreeView component

27 Aug 20255 minutes to read

The TreeView component allows you to customize the appearance and content of TreeView nodes using the nodeTemplate property. This property accepts either a template string or HTML element ID, enabling you to display rich content beyond simple text labels.

Node templates are particularly useful when you need to display structured data, images, icons, or multiple data fields within each tree node. The template system provides access to the complete node data object, allowing dynamic content rendering based on your data source.

In the following sample, employee information such as employee photo, name, and designation has been included using the nodeTemplate property.

The template content uses Angular template interpolation syntax with ${...} expressions to bind data properties from your TreeView data source.

app.component.ts
styles.css
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    imports: [
        FormsModule, TreeViewModule
    ],
    standalone: true,
    selector: 'app-container',
    // specifies the template url path
    templateUrl: './template.html',
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    constructor() {
    }
    // defined the array of data
    public localData: Object[] = [
        { id: 1, name: 'Steven Buchanan', eimg: '10', job: 'CEO', hasChild: true, expanded: true },
        { id: 2, pid: 1, name: 'Laura Callahan', eimg: '2', job: 'Product Manager', hasChild: true },
        { id: 3, pid: 2, name: 'Andrew Fuller', eimg: '7', job: 'Team Lead', hasChild: true },
        { id: 4, pid: 3, name: 'Anne Dodsworth', eimg: '1', job: 'Developer' },
        { id: 5, pid: 1, name: 'Nancy Davolio', eimg: '4', job: 'Product Manager', hasChild: true },
        { id: 6, pid: 5, name: 'Michael Suyama', eimg: '9', job: 'Team Lead', hasChild: true },
        { id: 7, pid: 6, name: 'Robert King', eimg: '8', job: 'Developer ' },
        { id: 8, pid: 7, name: 'Margaret Peacock', eimg: '6', job: 'Developer' },
        { id: 9, pid: 1, name: 'Janet Leverling', eimg: '3', job: 'HR' },
    ];
    public field: Object = { dataSource: this.localData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' };
    public cssClass: string = "custom";
}
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

#treeparent {
    display: block;
    max-width: 450px;
    max-height: 320px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

.custom .e-list-item .e-fullrow {
    height: 72px;
}

.custom .e-list-item .e-list-text {
    line-height: normal;
}

.eimage {
    float: left;
    padding: 11px 16px 11px 0;
}

.ename {
    font-size: 16px;
    padding: 14px 0 0;
}

.ejob {
    font-size: 14px;
    opacity: .87;
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Template in Angular TreeView component

See Also