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 { DxLookupModule } from "devextreme-angular";
  • import ArrayStore from "devextreme/data/array_store";
  • // ...
  • export class AppComponent {
  • products = [/* ... */ ];
  • lookupDataSource = new ArrayStore({
  • data: this.products,
  • onLoaded: function () {
  • // Event handling commands go here
  • }
  • });
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxLookupModule
  • ],
  • // ...
  • })
  • <dx-lookup
  • [dataSource]="lookupDataSource"
  • valueExpr="price"
  • displayExpr="name">
  • </dx-lookup>

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

TypeScript
HTML
  • import { DxLookupModule } from "devextreme-angular";
  • import DataSource from "devextreme/data/data_source";
  • // ...
  • export class AppComponent {
  • products = [/* ... */ ];
  • lookupDataSource = new DataSource({
  • store: this.products,
  • sort: { getter: "name", desc: true }
  • });
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxLookupModule
  • ],
  • // ...
  • })
  • <dx-lookup
  • [dataSource]="lookupDataSource"
  • valueExpr="price"
  • displayExpr="name">
  • </dx-lookup>
NOTE
Even if you have passed a JavaScript array to the dataSource option, the Lookup automatically places it into an ArrayStore wrapped into the DataSource you can get with the getDataSource() method.
See Also