• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Buttons / API / DropDownButtonComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

DropDownButtonComponent

Represents the Kendo UI DropDownButton component for Angular.

@Component({
selector: 'my-app',
template: `
 <kendo-dropdownbutton [data]="data">
   User Settings
 </kendo-dropdownbutton>
`
})
class AppComponent {
  public data: Array<any> = [{
      text: 'My Profile'
  }, {
      text: 'Friend Requests'
  }, {
      text: 'Account Settings'
  }, {
      text: 'Support'
  }, {
      text: 'Log Out'
  }];
}

Selector

kendo-dropdownbutton

Export Name

Accessible in templates as #kendoDropDownButtonInstance="kendoDropDownButton"

Inputs

NameTypeDefaultDescription

arrowIcon

boolean | ArrowIconSettings

false

Allows showing the default arrow icon or providing alternative one instead.

buttonAttributes

{[key: string]: string}

Sets attributes to the main button.

buttonClass

any

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

data

any

Sets or gets the data of the DropDownButton.

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

disabled

boolean

Sets the disabled state of the DropDownButton.

fillMode

ButtonFillMode

The fillMode property specifies the background and border styles of the DropDownButton (see example).

The available values are:

  • solid (default)
  • flat
  • outline
  • link
  • none

icon

string

Defines the name of an existing icon in the Kendo UI theme.

iconClass

string

Defines the list of CSS classes which are used for styling the Button with custom icons.

imageUrl

string

Defines a URL for styling the button with a custom image.

popupSettings

PopupSettings

Configures the popup of the DropDownButton.

The available options are:

  • animate: Boolean—Controls the popup animation. By default, the open and close animations are enabled.
  • popupClass: String—Specifies a list of CSS classes that are used to style the popup.
  • appendTo: "root" | "component" | ViewContainerRef—Specifies the component to which the popup will be appended.
  • align: "left" | "center" | "right"—Specifies the alignment of the popup.

rounded

ButtonRounded

The rounded property specifies the border radius of the DropDownButton (see example).

The possible values are:

  • small
  • medium (default)
  • large
  • full
  • none

size

ButtonSize

The size property specifies the padding of the DropDownButton (see example).

The possible values are:

  • small
  • medium (default)
  • large
  • none

svgIcon

SVGIcon

Defines an SVGIcon to be rendered within the button.

tabIndex

number

Specifies the tabIndex of the component.

textField

string

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

themeColor

ButtonThemeColor

The DropDownButton allows you to specify predefined theme colors. The theme color will be applied as a background and border color while also amending the text color accordingly (see example).

The possible values are:

  • base —Applies coloring based on the base theme color. (default)
  • primary —Applies coloring based on the primary theme color.
  • secondary—Applies coloring based on the secondary theme color.
  • tertiary— Applies coloring based on the tertiary theme color.
  • info—Applies coloring based on the info theme color.
  • success— Applies coloring based on the success theme color.
  • warning— Applies coloring based on the warning theme color.
  • error— Applies coloring based on the error theme color.
  • dark— Applies coloring based on the dark theme color.
  • light— Applies coloring based on the light theme color.
  • inverse— Applies coloring based on the inverse theme color.
  • none —Removes the default CSS class (no class would be rendered).

Fields

NameTypeDefaultDescription

isOpen

boolean

Returns the current open state of the popup.

Events

NameTypeDescription

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 on a drop-down list item. The event data contains the data item bound to the clicked list item.

blur

EventEmitter<any>

Fires each time the DropDownButton gets blurred.

focus

EventEmitter<any>

Fires each time the DropDownButton gets focused.

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.

Methods

blur

Blurs the DropDownButton component.

focus

Focuses the DropDownButton component.

toggle

Toggles the visibility of the popup. If the toggle method is used to open or close the popup, the open and close events will not be fired.

Parameters

open

boolean

The state of the popup.

In this article

Not finding the help you need?

Contact Support