DevExtreme Angular - OData Service

Use the ODataStore to bind SelectBox to data an OData service provides.

TypeScript
HTML
  • import ODataStore from "devextreme/data/odata/store";
  • import { DxSelectBoxModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • productStore = new ODataStore({
  • url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
  • key: "Product_ID"
  • });
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSelectBoxModule
  • ],
  • // ...
  • })
  • <dx-select-box
  • [dataSource]="productStore"
  • valueExpr="Product_Cost"
  • displayExpr="Product_Name">
  • </dx-select-box>

Data kept in the ODataStore can be processed in a DataSource. For example, the DataSource can filter data.

TypeScript
HTML
  • import "devextreme/data/odata/store";
  • import DataSource from "devextreme/data/data_source";
  • import { DxSelectBoxModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • productStore = new DataSource({
  • store: {
  • type: "odata",
  • url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
  • key: "Product_ID"
  • },
  • filter: ["Product_Available", "=", true]
  • });
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSelectBoxModule
  • ],
  • // ...
  • })
  • <dx-select-box
  • [dataSource]="productStore"
  • valueExpr="Product_Cost"
  • displayExpr="Product_Name">
  • </dx-select-box>
See Also