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

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 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.
Example
View Source
Change Theme:

You can add custom content above and under the rendered items of the Drawer by using the kendoDrawerHeaderTemplate and the kendoDrawerFooterTemplate.

Example
View Source
Change Theme:

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.

Example
View Source
Change Theme: