New to Kendo UI for Angular? Start a free 30-day trial
ButtonItemTemplateDirective
Used for rendering the list item content.
To define the item template, nest a <ng-template> tag with the kendo<ComponentName>ItemTemplate directive inside the component tag.
For the DropDownButton, use the kendoDropDownButtonItemTemplate directive.
For the SplitButton, use the kendoSplitButtonItemTemplate directive.
The template context is set to the current component. To get a reference to the current data item, use the let-dataItem directive.
@Component({
selector: 'my-app',
template: `
<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>
`
})
class AppComponent {
public listItems: Array<any> = [{
text: 'item1',
icon: 'arrow-rotate-cw',
disabled: false,
click: (dataItem: any) => {
//action
}
}, {
text: 'item2',
icon: 'arrow-rotate-cw',
disabled: false,
click: (dataItem: any) => {
//action
}
}]
}For more examples, refer to the article on the DropDownList templates.
Selector
[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]
