Getting Started
Components
- Barcodes
- Buttons
- Chartsupdated
- Conversational UIupdated
- Data Query
- Date Inputsupdated
- Date Math
- Dialogs
- Drawing
- Dropdownsupdated
- Editor
- Excel Export
- File Saver
- Filter
- Gantt
- Gauges
- Gridupdated
- Icons
- Indicators
- Inputsupdated
- Labels
- Layout
- ListBox
- ListView
- Map
- Menus
- Navigation
- Notification
- Pager
- PDF Export
- PDFViewer
- PivotGridupdated
- Popup
- ProgressBars
- Ripple
- Schedulerupdated
- ScrollView
- Sortable
- Spreadsheetupdated
- ToolBar
- Tooltips
- TreeList
- TreeView
- - Overview
  - Getting Started
  - Data Binding
  - Filtering
  - Persisting the Expanded State
  - Persisting the Disabled State
  - Selection
  - Checkboxes
  - Drag and Drop
  - Load More Button
  - Keyboard Navigation
  - Events
  - Node Template
  - Appearance
  - Accessibility
  - Globalization
  - API
- Typography
- Uploads
- Utilities
Styling & Themes
Common Features
Project Setup
Knowledge Base
Sample Applications
FAQ
Troubleshooting
Updates
Changelogs

Components / TreeView / Node Template /

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

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 available context variables are:

let-dataItem—The data item that the node is bound to.
let-index="index"—The index of the node in the current level.

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

Example

View Source

Change Theme:

Suggested Links

Is this article helpful?

Thank you for your feedback!