NodeTemplateDirective

Represents the template for the TreeView nodes (more information and example). The template helps to customize the content of the nodes. To define the node template, nest an <ng-template> tag with the kendoTreeViewNodeTemplate directive inside a <kendo-treeview> tag.

The node data item and its hierarchical index are available as context variables:

• let-dataItem (any) - available as implicit context variable
• let-index="index" (string)

ts

 import { Component } from '@angular/core';
 @Component({
     selector: 'my-app',
     template: `
     <kendo-treeview
         [nodes]="data"
         kendoTreeViewExpandable

         kendoTreeViewHierarchyBinding
         childrenField="items">
       <ng-template kendoTreeViewNodeTemplate let-dataItem let-index="index">
         <span [style.fontWeight]="dataItem.items ? 'bolder': 'normal' ">{{ index }}: {{ dataItem.text }}</span>
       </ng-template>
     </kendo-treeview>
   `
 })
 export class AppComponent {
     public data: any[] = [
         {
             text: "Inbox",
             items: [{ text: "Read Mail" }]
         },
         {
             text: "Drafts"
         },
         {
             text: "Search Folders",
             items: [
                 { text: "Categorized Mail" },
                 { text: "Large Mail" },
                 { text: "Unread Mail"}
             ]
         },
         { text: "Settings" }
     ];
 }

Selector

[kendoTreeViewNodeTemplate]