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 for 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 syntax.
The following example demonstrates how to customize the items' appearance in the Drawer.
For the Hierarchical Drawer, the kendoDrawerItemTemplate directive provides additional context fields:
level—A number that indicates the nesting level of the current item. Use thelet-level="level"syntax to access the nesting level.hasChildren—A boolean that indicates whether the current item has nested items. Use thelet-hasChildren="hasChildren"syntax to access the value.isItemExpanded—A boolean that holds information about the expanded state of the current item, which indicates whether its children are visible or not. Use thelet-isItemExpanded="isItemExpanded"syntax to access the value of the expanded state.
The following example demonstrates how to use the additional context fields of the kendoDrawerItemTemplate directive to customize the items in a hierarchical Drawer.
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
kendoDrawerTemplatedirective is used, only the contents inside itsng-templateelement will be displayed. All other template directives will be ignored.