Components / Dropdowns / DropDownList / Overview / 

Kendo UI for Angular DropDownList Overview

The Kendo UI for Angular DropDownList is a form component that lets you choose a single predefined value from a list.

It is a richer version of the <select> element and supports data binding, filtering, templates, and default items.

The DropDownList Component is part of Kendo UI for Angular, a professional grade UI library with 100+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Start Free Trial

The following example demonstrates the Angular DropDownList in action.

Example
View Source
Change Theme:

Key Features

  • Data binding—You can bind the Angular DropDownList to a list of possible values containing arrays of primitive or complex data.
  • Value binding—The DropDownList enables you to set its value to primitive or complex data.
  • Filtering—Apart from its default filter functionality, the DropDownList provides options for setting a minimum length of the search symbols and a built-in filter directive.
  • Grouping—You can group DropDownList items and display them as a grouped result.
  • Virtualization—The Angular DropDownList supports a virtualization mechanism which noticeably improves the performance of the component when it handles large datasets.
  • Default item—You can configure the default item of the DropDownList by using primitive or complex values.
  • Disabled items—You can disable any of the DropDownList items and prevent users from interacting with them.
  • Templates—You can customize the content of the DropDownList by using templates for its value, header, footer, and other elements.
  • Forms support—You can use the DropDownList both in template-driven and reactive Angular forms.
  • Adding new items—The Angular DropDownList allows you to render a button for the user to add new items to the list.
  • Controlling the open state—The DropDownList enables you to configure the initially opened item and prevent the opening and closing of its options list.
  • Cascading DropDownLists—The DropDownList enables you to render a series of two or more DropDownLists where each DropDownList is filtered based on the selected option in the previous DropDownList.
  • Globalization—All Kendo UI for Angular Dropdowns provide globalization options.
  • Accessibility—The DropDownList is accessible for screen readers and supports WAI-ARIA attributes.
  • Keyboard navigation—The DropDownList supports a number of keyboard shortcuts for processing various commands.

To learn more about the appearance, anatomy, and accessibility of the DropDownList, visit the Progress Design System documentation—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details.

Support and Learning Resources

Additional Resources

Previous
Keyboard Navigation
Next
Data Binding

In this article

Not finding the help you need?

Contact Support