New to Kendo UI for Angular? Start a free 30-day trial


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)

 import { Component } from '@angular/core';
     selector: 'my-app',
     template: `

       <ng-template kendoTreeViewNodeTemplate let-dataItem let-index="index">
         <span [style.fontWeight]="dataItem.items ? 'bolder': 'normal' ">{{ index }}: {{ dataItem.text }}</span>
 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" }



In this article

Not finding the help you need?