Templates
The FloatingActionButton allows you to use templates to display custom content or to customize the appearance of its Dial items list.
To define a template, nest an <ng-template> tag inside the <kendo-floatingactionbutton> tag and apply one of the following directives to it:
"kendoFloatingActionButtonTemplate"—Specifies the content of the FloatingActionButton."kendoDialItemTemplate"—Specifies the content of the Dial item.
FloatingActionButton Template
You can customize the look of the FloatingActionButton by using the kendoFloatingActionButtonTemplate directive. Apply the directive to an <ng-template> tag nested within the <kendo-floatingactionbutton> tag.
Dial Item Template
You can customize the look of each dial item by using the kendoDialItemTemplate directive. Apply the directive to an <ng-template> tag nested within the <kendo-floatingactionbutton> tag. The template context is set to the current dial item.
The following values are available as context variables:
let-item="item"(any)—The current dial item. Also available as an implicit context variable.let-index="index"(number)—The current index of the dial item.let-isFocused="isFocused"(boolean)—Indicates whether the current dial item is focused. You need to manually style the currently focused dial item to indicate its active state during keyboard navigation.
The following example demonstrates how to use the Dial item template.
