# Templates

The DropDownTree provides templates which enable you to customize the content of its drop-down list items.

## Item Template

To customize the content of the list items, use an item template. To define an item template, nest an `<ng-template>` tag with the [`kendoDropDownTreeNodeTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/nodetemplatedirective) directive inside a `<kendo-dropdowntree>` tag.

Use the `let-dataItem` directive to access the template context that is established based on the current data item displayed in the component list.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdowntree/templates/node/source.txt)

## Value Template

To customize the content of the element which holds the selected text, use the value template. To define a value template, nest an `<ng-template>` tag with a [`kendoDropDownTreeValueTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/valuetemplatedirective) directive inside a `<kendo-dropdownlist>` tag.

The template context is set to the current DropDownTree component. To get a reference to the current data item, use the `let-dataItem` directive.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdowntree/templates/value/source.txt)

## Header Template

To customize the header element of the drop-down list, use a header template. To define a header template, nest an `<ng-template>` tag with a [`kendoDropDownTreeHeaderTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/headertemplatedirective) directive inside a `<kendo-dropdowntree>` tag.

The template context is set to the current DropDownTree component.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdowntree/templates/header/source.txt)

## Footer Template

To customize the footer element of the drop-down list, use a footer template. To define a footer template, nest an `<ng-template>` tag with a [`kendoDropDownTreeFooterTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/footertemplatedirective) directive inside a `<kendo-dropdowntree>` tag.

The template context is set to the current DropDownTree component.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdowntree/templates/footer/source.txt)

## No-Data Template

To customize the content of the drop-down list when no data is available, use a no-data template. To define a no-data template, nest an `<ng-template>` tag with a [`kendoDropDownTreeNoDataTemplate`](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/nodatatemplatedirective) directive inside a `<kendo-dropdowntree>` tag.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/dropdowns/dropdowntree/templates/no_data/source.txt)

## Suggested Links

* [API Reference of the DropDownTree](https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/dropdowntreecomponent)