New to Kendo UI for Angular? Start a free 30-day trial
ButtonItemTemplateDirective
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
kendoDropDownButtonItemTemplatedirective for the DropDownButton. - Use the
kendoSplitButtonItemTemplatedirective for the SplitButton.
The template context is set to the current component. Use the let-dataItem directive to reference the current data item.
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.
Selector
[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]