Angular DropDownBox - Overview

The DropDownBox is a UI component that consists of a text field, which displays the current value, and a drop-down field, which can contain any UI element.

View Demo

The simplest UI component configuration requires specifying a dataSource, value and contentTemplate. The following code adds the DropDownBox to your page:

HTML
TypeScript
  • <dx-drop-down-box
  • [(value)]="selectedFruit"
  • [(opened)]="isDropDownBoxOpened"
  • [dataSource]="fruits">
  • <dx-list
  • [dataSource]="fruits"
  • selectionMode="single"
  • (onSelectionChanged)="changeDropDownBoxValue($event)">
  • </dx-list>
  • </dx-drop-down-box>
  • import { DxDropDownBoxModule, DxListModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
  • selectedFruit = this.fruits[0];
  • isDropDownBoxOpened = false;
  • changeDropDownBoxValue = function (args) {
  • this.selectedFruit = args.addedItems[0];
  • this.isDropDownBoxOpened = false;
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxDropDownBoxModule,
  • DxListModule
  • ],
  • // ...
  • })

If your data is an array of objects, specify:

  • valueExpr
    The data field whose value is written into the value property.
  • displayExpr
    The data field whose value is displayed in the input field of the UI component.
HTML
TypeScript
  • <dx-drop-down-box
  • [(value)]="selectedValue"
  • [(opened)]="isDropDownBoxOpened"
  • valueExpr="ID"
  • displayExpr="companyName"
  • [dataSource]="customerDataSource">
  • <dx-data-grid
  • [dataSource]="customerDataSource"
  • [selection]="{ mode: 'single' }"
  • [columns]="['companyName', 'city', 'phone']"
  • [height]="265"
  • [(selectedRowKeys)]="selectedCustomers"
  • (onSelectionChanged)="changeDropDownBoxValue($event)">
  • </dx-data-grid>
  • </dx-drop-down-box>
  • import { DxDropDownBoxModule, DxDataGridModule } from "devextreme-angular";
  • import ArrayStore from "devextreme/data/array_store";
  • // ...
  • export class AppComponent {
  • customers = [
  • { ID: 1, companyName: "Premier Buy", city: "Dallas", phone: "(233)2123-11" },
  • { ID: 2, companyName: "ElectrixMax", city: "Naperville", phone: "(630)438-7800" },
  • // ...
  • ];
  • customerDataSource = new ArrayStore({
  • data: this.customers,
  • key: "ID"
  • });
  • selectedCustomers = [this.customers[0].ID];
  • selectedValue = this.selectedCustomers[0];
  • isDropDownBoxOpened = false;
  • changeDropDownBoxValue(args) {
  • this.selectedValue = this.selectedCustomers[0];
  • this.isDropDownBoxOpened = false;
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxDropDownBoxModule,
  • DxDataGridModule
  • ],
  • // ...
  • })
See Also