---
title: "Editable Fields"
framework: angular
version: "2.1.2"
---

# Editable Fields

End users can edit a field's name, description, and formatting options directly in Studio when the developer opts the field in. Edits are surfaced through the Edit Panel when a field is selected in the Data Panel, and the resulting overrides are stored in [State](https://www.ag-grid.com/studio/angular/state/).

## Configuring Editability

Fields are fully editable by default. Use the `editable` property on a field definition to lock a field down or to restrict which properties the user can change:

```ts
const fields: AgFieldDefinition[] = [
    { id: 'country', format: 'textFormat' },
    { id: 'sport', format: 'textFormat', editable: false },
    { id: 'gold', format: 'integerFormat', editable: ['name', 'formatOptions'] },
    { id: 'silver', format: 'integerFormat', editable: ['name'] },
];
```

Pass `false` to make the field read-only, or an array of `AgFieldEditableKey` values to allow a subset:

| Key | What the user can edit |
| --- | --- |
| `name` | The display name shown wherever the field appears. |
| `description` | The description shown in the Field Panel. |
| `formatOptions` | Formatting options for the field's format type (see [Formatting](https://www.ag-grid.com/studio/angular/formatting/)). |

`editable` is available on field definitions, [expression fields](https://www.ag-grid.com/studio/angular/expressions/), and measures.

## Example

In the example below, select any field in the Data Panel to switch the Edit Panel to its field view. Each field is configured differently:

- **Country**: fully editable (default).
- **Sport**: read-only (`editable: false`).
- **Gold**: name and format options editable (`editable: ['name', 'formatOptions']`).
- **Silver**: name only (`editable: ['name']`).
- **Bronze**: read-only (`editable: false`).

#### Editable 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: Editable Fields](https://www.ag-grid.com/studio/examples/editable-fields/editable-fields/angular/)

## Persisting Edits

User edits are written to the `schema` slice of the report state as an `AgSchemaState` map keyed by field ID. Save and restore this with the rest of your report state. See [State](https://www.ag-grid.com/studio/angular/state/) for the full state model.