Template in Angular Tree View

31 Aug 20266 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 the ID of an HTML element defined in the component, 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. Each rendered node gains access to the corresponding data record so the markup can react to dynamic data.

Template-context syntax

When you supply a template string, bind values using the Syncfusion string-template syntax ${node.<field>} — references resolve against the node context variable that contains the current node’s data record:

Syntax Description
${node.id} The node’s unique identifier from the id field mapping.
${node.name} / ${node.<textField>} The display text mapped through the text field.
${node.<imgField>} Resolved image URL when the imageUrl field mapping is configured.

The ${...} placeholder is not Angular interpolation; it is the Syncfusion template engine that evaluates the expression against the node context for each rendered item.

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

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/material3.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material3.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));

See Also