# Binding the Angular Data Grid to Local Data

You can bind the [Angular Grid](https://www.telerik.com/kendo-angular-ui/components/grid) to a collection of items that is available locally on the client-side and display the data in tabular form. Use this approach when the whole collection is already stored in the application and needs to be accessible at any time, without depending on HTTP calls.

To bind the Grid to local data, choose one of the following approaches based on the specific [`data operation`](https://www.telerik.com/kendo-angular-ui/components/grid/data-operations) requirements (filtering, sorting, grouping, and paging):

* [Using the automatic data processing](https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/local-data#automatic-data-processing)—Allows you to implement data operations with less code.
* [Manual binding by using the `data` property](https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/local-data#manual-data-management)—Provides more control when implementing data operations.

## Automatic Data Processing

The [`DataBindingDirective`](https://www.telerik.com/kendo-angular-ui/components/grid/api/databindingdirective) enable you to bind local data and implement complex Grids by reducing the repetitive boilerplate code.

As a result, the source code is clean and easy to maintain.

To bind the Grid to local data, provide the collection to the built-in [`kendoGridBinding`](https://www.telerik.com/kendo-angular-ui/components/grid/api/databindingdirective) directive. You can enable any data operation by setting the corresponding properties of the Grid. See the [Grid Data Operations](https://www.telerik.com/kendo-angular-ui/components/grid/data-operations) article for more details.

```html
<kendo-grid
  [kendoGridBinding]="gridData"
  [sortable]="true"
  [filterable]="true"
></kendo-grid>
```

The following example demonstrates the `kendoGridBinding` directive in action.

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

## Manual Data Management

The manual binding provides the most straightforward way of binding an array of items to the Grid. To bind the Grid to a local data, set the built-in [`data`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent#data) input property to the corresponding collection.

```html
<kendo-grid [data]="gridData">
    <kendo-grid-column field="id"></kendo-grid-column>
    <kendo-grid-column field="name"></kendo-grid-column>
</kendo-grid>
```

Using this approach allows you to take full control over the data operations applied to the Grid. To implement filtering, sorting, grouping, and paging, you must handle the respective Grid [`data operation events`](https://www.telerik.com/kendo-angular-ui/components/grid/data-operations) and process the data manually in their corresponding handlers. As a result, the Grid will reflect the changes and update the UI.

Depending on the enabled data operations, you can bind the [`data`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent#data) property to:

* [`GridDataResult`](https://www.telerik.com/kendo-angular-ui/components/grid/api/griddataresult)—Necessary when the [`paging`](https://www.telerik.com/kendo-angular-ui/components/grid/paging/manual-paging) or [`virtual scrolling`](https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual) functionality is enabled.
* `Array`—Could be used when [`paging`](https://www.telerik.com/kendo-angular-ui/components/grid/paging/manual-paging) or [`virtual scrolling`](https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual) is not applied.

The following example demonstrates how to bind the `data` property to an array.

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

### Binding to a GridDataResult Object

To improve the Grid performance when the data contains a lot of records, utilize the [`paging`](https://www.telerik.com/kendo-angular-ui/components/grid/paging/manual-paging) or [`virtual scrolling`](https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual) features. In such scenarios the [`data`](https://www.telerik.com/kendo-angular-ui/components/grid/api/gridcomponent#data) property should be bound to a [`GridDataResult`](https://www.telerik.com/kendo-angular-ui/components/grid/api/griddataresult) object.

The following example demonstrates how to bind the `data` property to a `GridDataResult`.

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

## Suggested Links

* [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)
* [Binding to Remote Data](https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/remote-data)