@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

buttonClass

any

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

icon

string

Defines the name of an existing icon in a 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.

look

ButtonLook

Changes the visual appearance by using alternative styling options.

The available values are:

flat
outline

primary

boolean

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

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.

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.

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.