DevExtreme Angular - OData

To access an OData service, implement the ODataStore: specify the url of an OData entity collection, the key property, and the OData version. You can also handle data-related events:

app.component.ts
app.module.ts
app.component.html
  • import { Component } from '@angular/core';
  • import ODataStore from 'devextreme/data/odata/store';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • productsStore: ODataStore;
  •  
  • constructor() {
  • this.productsStore = new ODataStore({
  • url: 'https://js.devexpress.com/Demos/DevAV/odata/Products',
  • key: 'Product_ID',
  • version: 3,
  • onLoaded: () => {
  • // Event handling commands go here
  • }
  • });
  • }
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxDataGridModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxDataGridModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }
  • <dx-data-grid
  • [dataSource]="productsStore">
  • </dx-data-grid>

Data from the ODataStore can be shaped (filtered, sorted, grouped, etc.) in the DataSource.

The following example declares an ODataStore, wraps it in a DataSource, and binds the DataGrid UI component to this DataSource:

app.component.ts
app.module.ts
app.component.html
  • import { Component } from '@angular/core';
  • import ODataStore from 'devextreme/data/odata/store';
  • import DataSource from 'devextreme/data/data_source';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • productsDataSource: DataSource;
  •  
  • constructor() {
  • const productsStore = new ODataStore({
  • // ...
  • });
  •  
  • this.productsDataSource = new DataSource({
  • store: productsStore,
  • sort: 'Product_Name'
  • });
  • }
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxDataGridModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxDataGridModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }
  • <dx-data-grid
  • [dataSource]="productsDataSource">
  • </dx-data-grid>