# Binding the Angular Data Grid to OData

The [Kendo UI for Angular Grid](https://www.telerik.com/kendo-angular-ui/components/grid) has representational functionality and is indifferent to where its data comes from and how it is retrieved and/or updated. This allows you to use any remote data source including the OData v4 protocol.

The following step-by-step guide shows how to bind the Grid, using the OData v4 protocol:

1. Create the necessary data service and implement methods to fetch and read the data.

   ```ts
   public read(): void {
       this.fetch().subscribe((data) => {
           // Publish mapped OData results to Grid subscribers.
           super.next(data);
       });
   }

   public fetch(): Observable<Product[]> {
       return this.http
           .get(`https://demos.telerik.com/service/v2/odata/Products/`)
           .pipe(map((data: any) => <Product[]>data.value));
   }
   ```

2. Inject the created data service where the Grid component is defined.

   ```ts
   constructor(public odataService: ODataService) {}
   ```

3. Get the data from the server and bind the Grid to the obtained collection. For more details on how to handle data operations on the server, check the [Processing Data on the Server](https://www.telerik.com/kendo-angular-ui/components/grid/data-operations#processing-data-on-the-server) article.

   ```ts
   public gridData!: Observable<GridDataResult>;

   public ngOnInit(): void {
       this.gridData = this.odataService.pipe(
           // Apply the current Grid state to each service update.
           map((data) => process(data, this.gridState))
       );
       // Start loading after configuring the Grid data stream.
       this.odataService.read();
   }
   ```

4. Set the [`data`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent#data) input property of the component to an `Observable` of type [`GridDataResult`](https://www.telerik.com/kendo-angular-ui/components/grid/api/griddataresult). Once the data is received from an asynchronous source, pipe it through the `async` pipe.

   ```html
   <kendo-grid [data]="gridData | async" ...>
       <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
       ...
   </kendo-grid>
   ```

> Create an editable Grid using the OData v4 protocol by following the steps outlined in the [In-Cell Editing with OData Service](https://www.telerik.com/kendo-angular-ui/components/grid/editing/in-cell-editing#in-cell-editing-with-odata-service) article.

The following example demonstrates how to bind the Grid by using the OData v4 protocol.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/data-binding/odata/source.txt)

## Suggested Links

* [Binding to Remote Data](https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/remote-data)
* [Built-in DataBindingDirective](https://www.telerik.com/kendo-angular-ui/components/grid/api/databindingdirective)
* [API Reference of the GridComponent](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent)
* [API Index of the Grid](https://www.telerik.com/kendo-angular-ui/components/grid/api)