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

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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 implicit context variable.
  • let-index="index" (number) - The current dial item index.
  • 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.
Example
View Source
Edit In Stackblitz  
Change Theme: