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 from 0 so root level items would have level 0. Use the let-level="level" syntax to access the value.
• hasChildren - A boolean that represents whether the item has nested items. Use the let-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 the let-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 its ng-template element will be displayed. All other template directives will be ignored.

Suggested Links

• API Reference of the Drawer