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 it's 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.

Example
View Source
Edit In Stackblitz  
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
Edit In Stackblitz  
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
Edit In Stackblitz  
Change Theme: