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