DevExtreme Angular - Array Only
Bind the SelectBox to an array by passing it to the dataSource option. The array may contain primitive values...
TypeScript
HTML
- import { DxSelectBoxModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- products = [
- "HD Video Player",
- "SuperHD Video Player",
- "SuperPlasma 50",
- "SuperLED 50"
- ];
- }
- @NgModule({
- imports: [
- // ...
- DxSelectBoxModule
- ],
- // ...
- })
- <dx-select-box
- [dataSource]="products">
- </dx-select-box>
... or objects.
TypeScript
HTML
- import { DxSelectBoxModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- products = [
- { name: "HD Video Player", price: 100 },
- { name: "SuperHD Video Player", price: 420 },
- { name: "SuperPlasma 50", price: 1500 },
- { name: "SuperLED 50", price: 200 }
- ];
- }
- @NgModule({
- imports: [
- // ...
- DxSelectBoxModule
- ],
- // ...
- })
- <dx-select-box
- [dataSource]="products"
- valueExpr="price"
- displayExpr="name">
- </dx-select-box>
You can create a Query if objects in an array need to be processed (sorted, filtered, grouped, etc.). For example, in the following code, a Query sorts objects in the products
array by the price
field in descending order:
TypeScript
HTML
- import query from "devextreme/data/query";
- import { DxSelectBoxModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- products = [
- { name: "HD Video Player", price: 100 },
- // ...
- ];
- getSortedProducts () {
- return query(this.products)
- .sortBy("price", true)
- .toArray();
- }
- }
- @NgModule({
- imports: [
- // ...
- DxSelectBoxModule
- ],
- // ...
- })
- <dx-select-box ...
- dataSource="getSortedProducts()">
- </dx-select-box>
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.