odata-data-source v16.4.0
odata-data-source
Data source for material table and angular cdk table that can work with odata version 4 api. It supports sorting with MatSort and pagination with MatPaginator as well as per column filtering.
Demo
Online demo: https://stackblitz.com/edit/odata-data-source-v15
Demo with dynamic table: https://stackblitz.com/edit/dynamic-table-odata
The supported version of Angular Material will be indicated by the major version number of this library. Version 8.2.0 is for Angular Material ^8.0.0, version 9.3.0 is for ^9.0.0, while versions <1.2.0 should work for angular versions <8.0.0.
Getting started
1. Install odata-data-source:
npm install --save odata-data-source @angular/cdk odata-query
2. Import http client module:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app';
@NgModule({
...
imports: [
...
HttpClientModule
],
})
export class AppModule {}
4. Initialize ODataDataSource in your component with http client and resource path:
import { HttpClient } from '@angular/common/http';
constructor(private readonly httpClient: HttpClient) {}
@Component({
selector: 'app',
templateUrl: './app.component.html',
})
export class AppComponent {
const resourcePath = 'https://services.odata.org/V4/OData/OData.svc/Products';
this.dataSource = new ODataDataSource(this.httpClient, resourcePath);
}
5. Use the data source for material or cdk table with column templates matching data
<table cdk-table [dataSource]="dataSource">
...
</table>
Further info
API reference for odata-data-source
Name | Description |
---|---|
selectedFields: string[] | Properties to select from the odata api |
sort: MatSort | Instance of the MatSort directive used by the table to control its sorting. Sort changes emitted by the MatSort will trigger a request to get data from the api. |
paginator: MatPaginator | Instance of the MatPaginator component used by the table to control what page of the data is displayed. Page changes emitted by the MatPaginator will trigger a request to get data from the api. |
filters: ODataFilter[] | Array of filters that implement ODataFilter interface. Setting filters will trigger a request to get data from the api. |
initialSort: string[] | Sort that will be applied initialy, which will be overriden when manual sort is performed. Data can be sorted by multiple columns. Follow column name with 'desc' for descending order: 'columnName desc'. |
expandedFields: string[] | object | Properties in the odata api to be expanded. |
data: any[] | Result last propagated to subscribed observers. Setting this value would update subscribed observers. |
loading: Observable | Observable that indicates if data is being loaded. |
errors: Observable | Observable that indicates errors being returned from the OData api. Emits errors from httpClient or null when they are cleared by subsequesnt successful requests. |
refresh() | Triggers a new request to refresh the data. |
ODataFilter
ODataFilter has getFilter() method which needs to return an object that conforms to odata-query filter definition. Individual filters are then composed together using 'and' operator.
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
3 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago