All Components

Node Template

The TreeView enables you to customize the content of its nodes.

To customize the appearance of the nodes, use the NodeTemplate directive.

The following example demonstrates how to display an icon beside the text of a TreeView node.

import { Component } from '@angular/core';

const is = (fileName: string, ext: string) => new RegExp(`.${ext}\$`).test(fileName);

@Component({
    selector: 'my-app',
    template: `
    <kendo-treeview
        [nodes]="data"
        textField="text"
        kendoTreeViewExpandable

        kendoTreeViewHierarchyBinding
        childrenField="items"
        >

        <ng-template kendoTreeViewNodeTemplate let-dataItem>
            <span [ngClass]="iconClass(dataItem)"></span>
            {{dataItem.text}}
        </ng-template>

    </kendo-treeview>
  `
})
export class AppComponent {
    public data: any[] = [{
        text: 'My Documents',
        items: [
            {
                text: 'Kendo UI Project',
                items: [
                    { text: 'about.html' },
                    { text: 'index.html' },
                    { text: 'logo.png' }
                ]
            },
            {
                text: 'New Web Site',
                items: [
                    { text: 'mockup.jpg' },
                    { text: 'Research.pdf' }
                ]
            },
            {
                text: 'Reports',
                items: [
                    { text: 'February.pdf' },
                    { text: 'March.pdf' },
                    { text: 'April.pdf' }
                ]
            }
        ]
    }];

    public iconClass({ text, items }: any): any {
        return {
            'k-i-file-pdf': is(text, 'pdf'),
            'k-i-folder': items !== undefined,
            'k-i-html': is(text, 'html'),
            'k-i-image': is(text, 'jpg|png'),
            'k-icon': true
        };
    }
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeViewModule } from '@progress/kendo-angular-treeview';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, TreeViewModule]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './ng.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article