DevExtreme Angular - ArrayStore

Extend a JavaScript array's functionality by placing it into an ArrayStore. It provides an interface for loading and editing data, and allows you to handle data-related events.

TypeScript
HTML
  • import ArrayStore from "devextreme/data/array_store";
  • import { DxSelectBoxModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • products = [ /* ... */ ];
  • productsStore = new ArrayStore({
  • data: this.products,
  • onLoaded: function () {
  • // Event handling commands go here
  • }
  • });
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSelectBoxModule
  • ],
  • // ...
  • })
  • <dx-select-box
  • [dataSource]="productsStore"
  • valueExpr="price"
  • displayExpr="name">
  • </dx-select-box>

Data kept in the ArrayStore can be processed in a DataSource. For example, the DataSource can sort data.

TypeScript
HTML
  • import DataSource from "devextreme/data/data_source";
  • 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 }
  • ];
  • productsDataSource = new DataSource({
  • store: this.products,
  • sort: { getter: "name", asc: true }
  • });
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSelectBoxModule
  • ],
  • // ...
  • })
  • <dx-select-box
  • [dataSource]="productsDataSource"
  • valueExpr="price"
  • displayExpr="name">
  • </dx-select-box>
NOTE
Even if you have passed a JavaScript array to the dataSource option, the SelectBox automatically places it into an ArrayStore wrapped into the DataSource you can get with the getDataSource() method.
See Also