Angular DropDownList Component | Kendo UI for Angular (2024)

The Kendo UI for Angular Dropdown List component is a form component that enables users to select a single item from a popup list of options. A richer version of the HTML <select> element, the Angular DropDownList does not include an input element for typing values and instead relies on the user to select a value from the provided data list.

See the Angular DropDownList Overview demo

The Kendo UI for Angular DropDownList enables you to bind it to various forms of data, including datasets of complex items (objects) or an array of primitive items. As a part of this binding, fields can be defined to represent the text displayed to the user as well as a separate underlying value to be used by developers.

See the Angular DropDownList Data Binding demo

Group similar data items in natural categories to help users quickly and easily navigate and understand drop-down list. Define the field responsible for each category while you bind your dataset to the Kendo UI for Angular DropDownList.

See the Angular DropDownList Grouping demo

While users cannot directly type into the Kendo UI for Angular DropDownList main element, you can enable them to search through the data items with the Angular DropDownList filtering mechanism. Rather than displaying in the input of the Angular component, the filter appears as a search box at the top of the drop-down. You can configure Filtering in various ways, including employing “starts with” or “contains” conditions to ensure an intuitive experience and accurate results.

See the Angular DropDownList Filtering demo

With the Kendo UI for Angular DropDownList, you can specify a default value that will appear when the component initially renders. It provides a placeholder you can populate with the default value already selected or leave it empty. You can also use it as a label to indicate to users what to do or select from the drop-down list. By setting the Default Item property, the DropDownList will display your predefined custom value if users haven’t made their choice yet.

See Angular DropDownList Default Item demo

The Kendo UI for Angular DropDownList can handle large datasets without compromising performance. It comes with built-in virtualization that can easily process hundreds of thousands of data items at the speed of the users scrolling through the available options.

See the Angular DropDownList Virtualization demo

You can connect several Angular DropDownLists to act as a data filtering mechanism—selecting a value in one affects the available options in the other. This is often referred to as Cascading DropDownLists. The Kendo UI for Angular DropDownList enables you to effortlessly add multiple Angular DropDownLists on a page to leverage data dependencies in your datasets.

See the Angular DropDownList Cascading DropDownLists demo

The Kendo UI for Angular DropDownList supports both template-driven and reactive forms, ensuring you can incorporate the Angular DropDownList in any Angular form.

See the Angular DropDownList Forms Support demo

The Angular DropDownList supports an adaptive mode, enabling a mobile-friendly rendering of the component popup. The component automatically adapts to the current screen size and alters its rendering accordingly.

See the Angular DropDownList Adaptive Mode demo

Out of the box, the Kendo UI for Angular DropDownList renders items as plain text. You can utilize Angular templates to create a custom layout for each element, including the list items, the list value, the header and footer areas, as well as the message displayed when no data is connected to the Angular DropDownList.

See the Angular DropDownList Templates demo

For applications that require support for multiple cultures, the Kendo UI for Angular DropDownList has built-in support for updating internal messages to different languages. Additionally, the Angular DropDownList can be rendered as RTL (right-to-left).

See the Angular DropDownList Globalization demo

The Kendo UI for Angular DropDownList comes with support for keyboard navigation out of the box to help users navigate and select data items using just the keyboard.

See the Angular DropDownList Keyboard Navigation demo.

The Kendo UI for Angular DropDownList is complaint with Section 508 standards, is AA rated with WCAG 2.0 and follows WAI-ARIA standards.

See the Angular DropDownList Accessibility demo

We support every popular web development framework and strive for parity among our component libraries. You can find the DateTimePicker for these popular platforms:

• React
• Vue
• jQuery
• Blazor
• ASP.NET Core
• ASP.NET MVC