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

ToolBarDropDownButtonComponent

Represents the Kendo UI ToolBar DropDownButton for Angular.

Selector

kendo-toolbar-dropdownbutton

Export Name

Accessible in templates as #kendoToolBarDropDownButtonInstance="kendoToolBarDropDownButton"

Inputs

buttonClass

string

The CSS classes that will be rendered on the main button. Supports the type of values that are supported by ngClass.

disabled

boolean

Sets the disabled state of the DropDownButton.

look

ButtonLook

Changes the visual appearance by using alternative styling options. (see example).

The available values are:

  • flat
  • outline

primary

boolean

Adds visual weight to the default button and makes it primary.

showIcon

DisplayMode

Defines the location of the button icon that will be displayed.

showText

DisplayMode

Defines the location of the button text that will be displayed.

textField

string

Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.

data

any[]

Sets the data of the DropDownButton (see example).

The data has to be provided in an array-like list.

icon

string

Defines an icon that will be rendered next to the button text.

iconClass

string

Defines an icon with a custom CSS class that will be rendered next to the button text.

imageUrl

string

Defines the location of an image that will be displayed next to the button text.

popupSettings

PopupSettings

Configures the popup of the DropDownButton.

The available options are:

  • animate:BooleanControls the popup animation. By default, the open and close animations are enabled.
  • popupClass:StringSpecifies a list of CSS classes that are used to style the popup.

text

string

Sets the text of the DropDownButton (see example.

Events

close

EventEmitter<PreventableEvent>

Fires each time the popup is about to close. This event is preventable. If you cancel the event, the popup will remain open.

itemClick

EventEmitter<any>

Fires each time the user clicks a DropDownButton item. The event data contains the data item that is bound to the clicked list item.

open

EventEmitter<PreventableEvent>

Fires each time the popup is about to open. This event is preventable. If you cancel the event, the popup will remain closed.