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
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.