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

ButtonItemTemplateDirective

Directive

Renders the list item content.

To define the item template, nest a <ng-template> tag with the kendo<ComponentName>ItemTemplate directive inside the component tag.

Use the kendoDropDownButtonItemTemplate directive for the DropDownButton.
Use the kendoSplitButtonItemTemplate directive for the SplitButton.

The template context is set to the current component. Use the let-dataItem directive to reference the current data item.

Definition

Package:@progress/kendo-angular-buttons

Selector:[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]

Syntax:

html

<kendo-splitbutton [data]="listItems">
  <ng-template kendoSplitButtonItemTemplate let-dataItem>
    <span>{{dataItem}} option</span>
  </ng-template>
</kendo-splitbutton>
<kendo-dropdownbutton [data]="listItems">
  <ng-template kendoDropDownButtonItemTemplate let-dataItem>
    <span>{{dataItem}} option</span>
  </ng-template>
</kendo-dropdownbutton>

For more examples, refer to the article on the DropDownButton templates.