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

Controlling the Open State

The FloatingActionButton enables you to control the state of its Dial items list.

The component provides the following options for:

You can also retrieve the current open state of the FloatingActionButton Dial items by using the isOpen getter.

Configuring the Initial State

You can enable the user to manually toggle between the open and close state of the Dial items list by invoking the toggleDial method with a Boolean argument that determines the desired state.

To open the Dial items list, call the toggleDIal method with true. To close the list, call the method with false.

The following example demonstrates how to configure an initially opened FloatingActionButton.

Example
View Source
Edit In Stackblitz  
Change Theme:

Preventing Opening and Closing

The open and close events are emitted right before the Dial items list is about to open or close.

To prevent the corresponding action, call the preventDefault method of the event argument.

The following example demonstrates how to prevent the closing of the Dial items list.

Example
View Source
Edit In Stackblitz  
Change Theme: