jQWidgets
  • Docs
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Products
    • Angular
    • React
    • Vue
    • jQuery
    • Web Components
    • Blazor
    • Svelte
    • Templates
  • Download
Angular UI Components
  • Javascript/jQuery
  • Angular
  • Vue
  • React
  • Web Components
  • Blazor
  • Templates
  • Theme Builder
  • Artavolo
Show Demo List

Angular UI Components (Angular 16–22 supported)

Data Grids and Tables

  • jqxGrid
  • jqxPivotGrid
  • jqxTreeGrid
  • jqxDataTable

Charts and Visualization

  • jqxChart
  • jqxGauge
  • jqxBarGauge
  • jqxBulletChart
  • jqxHeatMap
  • jqxTreeMap
  • jqxRangeSelector
  • jqxBarcode New
  • jqxQRcode New
  • jqxDraw

Scheduling and Planning

  • jqxScheduler
  • jqxGantt
  • jqxKanban
  • jqxTimeline

AI and Collaboration

  • jqxChat New

Editors and Inputs

  • jqxEditor
  • jqxForm
  • jqxDateTimeInput
  • jqxCalendar
  • jqxTimePicker
  • jqxInput
  • jqxNumberInput
  • jqxMaskedInput
  • jqxFormattedInput
  • jqxComplexInput
  • jqxPasswordInput
  • jqxTextArea
  • jqxColorPicker
  • jqxSlider
  • jqxKnob
  • jqxRating
  • jqxButtons
  • jqxCheckBoxGroup New
  • jqxFileUpload
  • jqxValidator
  • jqxValidator

Lists and Selection

  • jqxDropDownList
  • jqxComboBox
  • jqxListBox
  • jqxTree
  • jqxPickList New

Navigation and Menus

  • jqxTabs
  • jqxMenu
  • jqxToolBar
  • jqxRibbon
  • jqxNavigationBar
  • jqxNavBar
  • jqxListMenu

Layout and Containers

  • jqxSplitter
  • jqxLayout
  • jqxDockingLayout
  • jqxDocking
  • jqxSplitLayout
  • jqxPanel
  • jqxExpander
  • jqxResponsivePanel
  • jqxScrollView
  • jqxScrollBar

Popups and Feedback

  • jqxWindow
  • jqxNotification
  • jqxTooltip
  • jqxPopOver
  • jqxLoader
  • jqxProgressBar

Data and Utilities

  • jqxDragDrop
  • jqxSortable

jqxDropDownList

  • Default Functionality
  • Text with Icons
  • Categories
  • Binding to XML
  • Binding to JSON
  • Custom Rendering
  • Templates
  • Save/Load Selection Using Cookies
  • DropDown Horizontal Alignment
  • DropDown Vertical Alignment
  • Animation
  • CheckBoxes
  • Auto Open
  • Filtering
  • Load Data from Select
  • Fluid Size
  • Events
  • Keyboard Navigation
  • Right to Left Layout
  • Create Component
  • Two-way Data Binding
Theme:
  • Demo
  • App.htm
  • app.ts
  • app.html
  • main.ts
  • API Reference

Angular DropDownList UI Component

The DropDownList component for Angular represents a list containing selectable items displayed in a drop-down. It performs exceptionally well with thousands of items and supports keyboard navigation and rich list items visualization. In addition you can put images and checkboxes next to the text of each item.

angular dropdownlist

About jqxDropDownList for Angular

jqxDropDownList is the jQWidgets DropDownList component for Angular. Drop-down list with check boxes, grouping, templates and filtering.

21 jqxDropDownList demos with source code

  • Default Functionality – The default functionalities in Angular DropDownList.
  • Text with Icons – Text and icons combined in Angular DropDownList.
  • Categories – Display items in groups in Angular DropDownList.
  • Binding to XML – Angular DropDownList bound to XML.
  • Binding to JSON – Angular DropDownList bound to JSON.
  • Custom Rendering – The rendering function in Angular DropDownList.
  • Templates – The templates in Angular DropDownList.
  • Save/Load Selection Using Cookies – Save and load Angular DropDownList using cookies.
  • DropDown Horizontal Alignment – Change the alignment in Angular DropDownList.
  • DropDown Vertical Alignment – Change the vertical alignment in Angular DropDownList.
  • Animation – The animations available in Angular DropDownList.
  • CheckBoxes – Check boxes in Angular DropDownList.
  • Auto Open – Auto open in Angular DropDownList.
  • Filtering – The filtering in Angular DropDownList.
  • Load Data from Select – Using external data in Angular DropDownList.
  • Fluid Size – The width and height of Angular DropDownList are set in percentages.
  • Events – Are shown the events in Angular DropDownList.
  • Keyboard Navigation – Keyboard navigation in Angular DropDownList.
  • Right to Left Layout – The right to left function in Angular DropDownList.
  • Create Component – Angular DropDownList created through one setting.
  • Two-way Data Binding – Angular DropDownList that displays images next to each other.

jqxDropDownList API

jqxDropDownList has 36 properties, 7 events and 38 methods, all in the API reference. Its main members, those its demos use first:

  • selectedIndex (property) – Sets or gets the selected index.
  • displayMember (property) – Sets or gets the displayMember of the Items.
  • valueMember (property) – Sets or gets the valueMember of the Items.
  • select (event) – This event is triggered when the user selects an item.
  • dropDownWidth (property) – Sets or gets the width of the jqxDropDownList's ListBox displayed in the widget's DropDown.
  • itemHeight (property) – Sets or gets the height of the jqxDropDownList Items.
  • renderer (property) – Callback function which is called when an item is rendered.
  • dropDownHorizontalAlignment (property) – Sets or gets the DropDown's alignment.
  • template (property)
  • dropDownVerticalAlignment (property) – Sets or gets the DropDown's alignment.

Learn more

  • Getting started
  • API reference
  • JavaScript version
jQWidgets
  • Facebook
  • X (Twitter)
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Products
  • Angular UI Components
  • React UI Components
  • Vue UI Components
  • Blazor UI Components
  • jQuery UI Components
  • Javascript UI Components
  • Svelte Data Grid (SvGrid)
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2026. All Rights Reserved.