Search results

Template

The TreeView component allows you to customize the look of TreeView nodes by using the nodeTemplate property. This property accepts either template string or HTML element ID.

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

The template expression should be provided inside the ${...} interpolation syntax.

Source
Preview
app.component.ts
app.module.ts
main.ts
template.html
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-container',
    // specifies the template url path
    templateUrl: './app/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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, TreeViewModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<div id="wrapper" style='margin-top: 20px'>
    <div id='content' style="margin: 0px auto; width:400px;">
        <div id='treeparent'>
            <!-- specifies the template string for the TreeView component-->
            <ejs-treeview id="tree" [fields]="field" [cssClass]="cssClass">
                <ng-template #nodeTemplate="" let-data="">
                    <div>
                        <img class="eimage" src="https://ej2.syncfusion.com/demos/src/treeview/images/employees/{{data.eimg}}.png" alt="{{data.eimg}}"/>
                        <div class="ename">{{data.name}}</div>
                        <div class="ejob">{{data.job}}</div>
                    </div>
                </ng-template>
            </ejs-treeview>
        </div>
    </div>    
</div>

See Also