DevExtreme Angular - OData Service
Use the ODataStore to bind the Lookup to data provided by an OData service.
TypeScript
HTML
- import { DxLookupModule } from "devextreme-angular";
- import ODataStore from "devextreme/data/odata/store";
- // ...
- export class AppComponent {
- lookupDataSource = new ODataStore({
- url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
- key: "Product_ID"
- });
- }
- @NgModule({
- imports: [
- // ...
- DxLookupModule
- ],
- // ...
- })
- <dx-lookup
- [dataSource]="lookupDataSource"
- valueExpr="Product_Cost"
- displayExpr="Product_Name">
- </dx-lookup>
Data kept in the ODataStore can be processed in a DataSource. For example, the DataSource can filter data.
TypeScript
HTML
- import { DxLookupModule } from "devextreme-angular";
- import DataSource from "devextreme/data/data_source";
- import "devextreme/data/odata/store";
- // ...
- export class AppComponent {
- lookupDataSource = new DataSource({
- store: {
- type: "odata",
- url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
- key: "Product_ID"
- },
- filter: ["Product_Available", "=", true]
- });
- }
- @NgModule({
- imports: [
- // ...
- DxLookupModule
- ],
- // ...
- })
- <dx-lookup
- [dataSource]="lookupDataSource"
- valueExpr="Product_Cost"
- displayExpr="Product_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.