New to Kendo UI for Angular? Start a free 30-day trial
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 variablelet-index="index"(string)
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]
