Templates
The Drawer allows you to use templates to customize its appearance.
To define a template, nest an <ng-template>
tag inside the <kendo-drawer>
tag and apply one of the following directives to it:
"kendoDrawerItemTemplate"
—Specifies the look of the items in the list."kendoDrawerHeaderTemplate"
—Specifies the contents above the rendered items."kendoDrawerFooterTemplate"
—Specifies the contents below the rendered items."kendoDrawerTemplate"
—Completely overrides the contents of the Drawer. Allows full customization of its appearance.
Item Template
When you bind the Drawer to a collection of items
, you can customize the look of its items by using the kendoDrawerItemTemplate
directive. Apply the directive to an <ng-template>
tag nested within the <kendo-drawer>
tag. The template context is set to the current Drawer item.
To get a reference to the current item, use the let-item
directive.
For nested (hierarchical) Drawer items, there are additional fields that can be utilized:
level
- The level of nesting of the current item. The levels start from0
so root level items would have level0
. Use thelet-level="level"
syntax to access the value.hasChildren
- A boolean that represents whether the item has nested items. Use thelet-hasChildren="hasChildren"
syntax to access the value.isItemExpanded
- A boolean that holds information on whether the current item is expanded (its children are visible) or not. Use thelet-isItemExpanded="isItemExpanded"
syntax to access the value.
Header and Footer Templates
You can add custom content above and under the rendered items of the Drawer by using the kendoDrawerHeaderTemplate
and the kendoDrawerFooterTemplate
.
Drawer Template
To display custom content inside the Drawer, utilize the kendoDrawerTemplate
directive.
When the
kendoDrawerTemplate
directive is used, only the contents inside itsng-template
element will be displayed. All other template directives will be ignored.