DevExtreme Angular - Overview
The DropDownBox is a widget that consists of a text field, which displays the current value, and a drop-down field, which can contain any UI element.
The simplest widget 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">
- <div *dxTemplate="let contentData of 'content'">
- <dx-list
- [dataSource]="fruits"
- selectionMode="single"
- (onSelectionChanged)="changeDropDownBoxValue($event)">
- </dx-list>
- </div>
- </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 option. - displayExpr
The data field whose value is displayed in the input field of the widget.
HTML
TypeScript
- <dx-drop-down-box
- [(value)]="selectedCustomers"
- [(opened)]="isDropDownBoxOpened"
- valueExpr="id"
- displayExpr="companyName"
- [dataSource]="customerDataSource">
- <div *dxTemplate="let contentData of 'content'">
- <dx-data-grid
- [dataSource]="customerDataSource"
- [selection]="{ mode: 'single' }"
- [columns]="['companyName', 'city', 'phone']"
- [height]="265"
- [(selectedRowKeys)]="selectedCustomers"
- (onSelectionChanged)="changeDropDownBoxValue($event)">
- </dx-data-grid>
- </div>
- </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" },
- // ...
- ];
- customerDataSource = new ArrayStore({
- data: this.customers,
- key: "id"
- });
- selectedCustomers = [this.customers[1].id];
- isDropDownBoxOpened = false;
- changeDropDownBoxValue = function (args) {
- this.isDropDownBoxOpened = false;
- }
- }
- @NgModule({
- imports: [
- // ...
- DxDropDownBoxModule,
- DxDataGridModule
- ],
- // ...
- })
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.