DevExtreme Angular - OData Service

To bind the List to data provided by an OData service, use the ODataStore.

TypeScript
HTML
CSS
  • import { DxListModule } from "devextreme-angular";
  • import ODataStore from "devextreme/data/odata/store";
  • // ...
  • export class AppComponent {
  • listDataSource = new ODataStore({
  • url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
  • key: "Product_ID"
  • });
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })
  • <dx-list
  • [dataSource]="listDataSource">
  • <div *dxTemplate="let data of 'item'">
  • <img class="item-image" src="data:image/jpg;base64,{{data.Product_Primary_Image}}" style="height:30px; width:30px">
  • <p class="item-text">{{data.Product_Name}}</p>
  • </div>
  • </dx-list>
  • .item-image {
  • vertical-align: middle;
  • }
  •  
  • .item-text {
  • display: inline-block;
  • vertical-align: middle;
  • margin: 0px 0px 0px 10px;
  • }

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

TypeScript
HTML
  • import { DxListModule } from "devextreme-angular";
  • import "devextreme/data/odata/store";
  • import DataSource from "devextreme/data/data_source";
  • // ...
  • export class AppComponent {
  • productDataSource = new DataSource({
  • store: {
  • type: "odata",
  • url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
  • key: "Product_ID"
  • },
  • group: "Product_Category",
  • filter: ["Product_Available", "=", true]
  • });
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })
  • <dx-list
  • [dataSource]="productDataSource"
  • [grouped]="true" >
  • <div *dxTemplate="let data of 'item'">
  • <!-- The template is omitted for brevity -->
  • <!-- See the previous code example -->
  • </div>
  • </dx-list>
See Also