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


Renders the group header content. To define the group template, nest an <ng-template> tag with the kendo<ComponentName>GroupTemplate directive inside the component tag. The template context is set to the current component. To get a reference to the current data item, use the let-groupName directive.

import { groupBy } from '@progress/kendo-data-query';
selector: 'my-app',
template: `
 <kendo-combobox [data]="groupedData" textField="name" valueField="name">
   <ng-template kendoComboBoxGroupTemplate let-groupName>
     <span>Food type: {{groupName}} option</span>
class AppComponent {
  public data = [
      { name: "Pork", category: "Food", subcategory: "Meat" },
      { name: "Pepper", category: "Food", subcategory: "Vegetables" },
      { name: "Beef", category: "Food", subcategory: "Meat" }
  public groupedData = groupBy(, [{field: "subcategory"}]);



In this article

Not finding the help you need?