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