DevExtreme Angular - Array Only

Bind the Lookup to an array by passing it to the dataSource option. The array may contain primitive values...

TypeScript
HTML
  • import { DxLookupModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • lookupDataSource = ["HD Video Player", "SuperHD Video Player", "SuperPlasma 50", "SuperLED 50"];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxLookupModule
  • ],
  • // ...
  • })
  • <dx-lookup
  • [dataSource]="lookupDataSource">
  • </dx-lookup>

... or objects.

TypeScript
HTML
  • import { DxLookupModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • lookupDataSource = [
  • { name: "HD Video Player", price: 100 },
  • { name: "SuperHD Video Player", price: 420 },
  • { name: "SuperPlasma 50", price: 1500 },
  • { name: "SuperLED 50", price: 200 }
  • ];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxLookupModule
  • ],
  • // ...
  • })
  • <dx-lookup
  • [dataSource]="lookupDataSource"
  • valueExpr="price"
  • displayExpr="name">
  • </dx-lookup>

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 { DxLookupModule } from "devextreme-angular";
  • import query from "devextreme/data/query";
  • // ...
  • export class AppComponent {
  • products = [
  • { name: "HD Video Player", price: 100 },
  • // ...
  • ];
  • getSortedProducts () {
  • return query(this.products)
  • .sortBy("price", true)
  • .toArray();
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxLookupModule
  • ],
  • // ...
  • })
  • <dx-lookup
  • [dataSource]="getSortedProducts()"
  • valueExpr="price"
  • displayExpr="name">
  • </dx-lookup>
See Also