Kendo UI for Angular

DropDownList

  • Enable users to select a single item from a pop up list of predefined options.
  • Part of the Kendo UI for Angular library along with more than 100 professionally-designed components developers trust for all their Angular UI needs.
  • Get up and running quickly with award winning support, detailed documentation, demos, virtual classrooms and a 3-million-strong developer community.
Angular UI Component Library
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Kendo UI for Angular Dropdown List component is a form component which 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 Angular DropDownList Overview demo.

    Kendo UI for Angular DropDownList - Overview
  • Data Binding

    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 Angular DropDownList Data Binding demo.

  • Grouping

    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 Angular DropDownList Grouping demo.

    Kendo UI for Angular DropDownList - Grouping
  • Filtering

    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 employ “starts with” or “contains” conditions to ensure an intuitive experience and accurate results.

    See Angular DropDownList Filtering demo.

    Kendo UI for Angular DropDownList - Filtering
  • Default Item

    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.

    Kendo UI for Angular DropDownList - Default Item
  • Virtualization

    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 Angular DropDownList Virtualization demo.

    Kendo UI for Angular DropDownList - Virtualization
  • Cascading DropDownLists

    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 Angular DropDownList Cascading DropDownLists demo.

    Kendo UI for Angular DropDownList - Cascading DropDownLists
  • Forms Support

    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 Angular DropDownList Forms Support demo.

    Kendo UI for Angular DropDownList - Forms Support
  • Templates

    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 Angular DropDownList Templates demo.

    Kendo UI for Angular DropDownList - Templates
  • Globalization

    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 Angular DropDownList Globalization demo.

    Kendo UI for Angular DropDownList - Globalization
  • Keyboard Navigation

    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 Angular DropDownList Keyboard Navigation demo.

  • Accessibility

    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 Angular DropDownList Accessibility demo.

    Kendo UI for Angular - Calendar Accessibility
Kendo Angular UI Getting Started Background

Get Started with Kendo UI for Angular

Kendo UI