---
title: "Sync Data"
framework: angular
version: "2.1.2"
---

# Sync Data

Synchronous data sources can be used when data has already been loaded in the application.

A synchronous data source represents a single table of data.

#### Synchronous Data Source

```ts
import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component.ts';

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});
```

[Live example: Synchronous Data Source](https://www.ag-grid.com/studio/examples/sync-data/sync-data-source/angular/)

```ts
<ag-studio
    [data]="data"
    /* other studio properties ... */ />

this.data = {
    sources: [{
        id: 'medals',
        data: [
            {
                year: 2000,
                sport: 'Swimming',
                country: 'United States',
                // ... other fields
            },
            // ... other rows
        ],
    }],
};
```

Synchronous data sources are represented by the `AgSimpleDataSourceDefinition` interface.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` |  | Table ID |
| `name` | `string` |  | Table display name. If not provided, a formatted version of `id` will be used. |
| `description` | `string` |  | AI-facing description of this table's contents and purpose. |
| `data` | `TData[]` |  | Row data. |
| `fields` | `AgFieldDefinition<TRegistry, any, AgFormat<TRegistry>, any>[]` |  | Fields in the table. If not provided, will be inferred from the data. |

## Fields

By default, if no fields are provided, they will be inferred from the data.

It is also possible to provide and customise fields as part of the source definition.

#### Customising Fields

```ts
import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component.ts';

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});
```

[Live example: Customising Fields](https://www.ag-grid.com/studio/examples/sync-data/sync-custom-fields/angular/)

The example above demonstrates customising fields. The country field has been titled `Location`, and the age field has been hidden from the UI.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` |  | Field ID. |
| `name` | `string` |  | Display name. |
| `description` | `string` |  | Field description. Displayed in the Field Panel |
| `hide` | `boolean` |  | Set to `true` to hide from being selected in the UI. Field can still be used for joins. |
| `editable` | `boolean \| AgFieldEditableKey[]` |  | Controls whether the field can be edited in the UI. |
| `serializer` | `AgFieldSerializer<InferDataTypeFromFormat<TRegistry, TFormat>>` |  | Optional. How the field values will be serialized into state. Defaults to format serializer. |
| `deserializer` | `AgFieldDeserializer<InferDataTypeFromFormat<TRegistry, TFormat>>` |  | Optional. How the field values will be deserialized from state. Defaults to format deserializer. |
| `createValueFormatter` | `AgFieldValueFormatterFactory<InferDataTypeFromFormat<TRegistry, TFormat>, TFormatOptions, any>` |  | Optional. Build a value formatter bound to the field's format options and the runtime API. Defaults to format factory. |
| `blankValue` | `string` |  | Optional. How blank values will be displayed. Defaults to format blank value. |
| `formatOptions` | `TFormatOptions` |  | Optional. Will be passed to the value formatter. |
| `format` | `TFormat` |  | The format type of the field (provides default formatting, etc.). |
| `accessor` | `AgFieldDataAccessor<TData, InferDataTypeFromFormat<TRegistry, TFormat>>` |  | Optional. How to retrieve the value from the data. Either the property key, or a callback. If undefined, `id` will be used as the property key. |
| `cardinality` | `AgFieldCardinality` |  | Optional. Cardinality of the field data. Improves performance if provided. |
| `notBlank` | `boolean` |  | Optional. Does the field contain blank values. Improves performance if provided. |
| `supportedBuckets` | `string[]` |  | Optional. The buckets that this field supports. If undefined, will default to the `supportedBuckets` on the format. |

## Multiple Tables

When multiple tables are provided, they can be linked by providing [Relationships](https://www.ag-grid.com/studio/angular/data#relationships).

## Reloading Data

Synchronous data can be reloaded by passing updated data sources to the `data` property.

Note that only the data will be updated. Data sources cannot be added or removed, and fields cannot be updated.

#### Reloading Data

```ts
import '@angular/compiler';
import { provideHttpClient } from '@angular/common/http';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component.ts';

const app = bootstrapApplication(AppComponent, {
    providers: [provideHttpClient()],
});
```

[Live example: Reloading Data](https://www.ag-grid.com/studio/examples/sync-data/sync-data-reload/angular/)