---
title: "Modes & Layout"
framework: angular
version: "2.1.2"
---

# Modes & Layout

AG Studio has two main modes - view and edit. Edit mode allows for the construction of reports with the drag-and-drop builder, whilst view mode allows the reports to be viewed as read-only.

## Changing Mode

#### Changing Mode

```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: Changing Mode](https://www.ag-grid.com/studio/examples/modes-layout/changing-mode/angular/)

The mode can be changed via the `mode` property.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `AgStudioMode` | `'view'` | Which mode Studio is in. |

## Layout Properties

#### Layout Properties

```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: Layout Properties](https://www.ag-grid.com/studio/examples/modes-layout/layout-properties/angular/)

The default layout setup can be overridden via the `layout` property. The example above adjusts the default number of columns and the row height in the layout. This affects the widget moving and resizing behaviour.

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

this.layout = {
    columns: 4,
    rowHeight: 50,
};
```

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `layout` | `Partial<AgPageLayoutState>` |  | Default layout styling. |

## Page Dimensions

Page Dimensions define the space your report should fit into and how it behaves when the browser window or device size changes. They are configured via the `layout` property.

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

this.layout = {
    minWidth: 800,
    maxWidth: 1200,
    height: 600,
};
```

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `layout` | `Partial<AgPageLayoutState>` |  | Default layout styling. |

### Width

Width settings help keep the layout readable and well-proportioned across different screen sizes.

Min Width defaults to 720px. It defines the smallest width the page can shrink to before horizontal scrolling is needed. In the example below, a large minimum width is set, so a horizontal scrollbar appears when the viewport is narrower than the minimum width.

#### Min Width

```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: Min Width](https://www.ag-grid.com/studio/examples/modes-layout/min-width/angular/)

Max Width is optional and can be left as Auto. When left as Auto, the dashboard can continue expanding beyond the minimum width as the viewport grows.

If Max Width is set, the dashboard stops growing once it reaches that width and remains centred on the screen. In the example below, a fixed maximum width is applied, so the dashboard stops expanding and centres within the available space.

#### Max Width

```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: Max Width](https://www.ag-grid.com/studio/examples/modes-layout/max-width/angular/)

This means:

- A required Min Width sets the minimum readable size.
- An optional Max Width controls how wide the dashboard is allowed to grow.

### Height

Auto Height allows the page to grow as Widgets are added. This works well for dashboards that may expand over time, or reports where content scrolls vertically.

Fixed Height locks the page to a specific height, like a slide or poster. This works well when vertical boundaries need to be fixed for a consistent, contained view, especially for dashboards designed to fit on a single screen.

#### Fixed Height

```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: Fixed Height](https://www.ag-grid.com/studio/examples/modes-layout/fixed-height/angular/)

> **Note**
>
> When using Fixed Height, set it to be a multiple of the layout `rowHeight` plus double the layout `pagePadding` to avoid additional padding at the top and bottom of the layout. `rowHeight` defaults to the `studioCanvasRowHeight` theme variable, which is `16` in the default theme. `pagePadding` defaults to `widgetPadding` if not defined, which in turn defaults to the `studioWidgetPadding` theme variable, which is `4` in the default theme

## Panels

Studio has four different panels that can be displayed depending on the mode:

- AI Panel (`'ai'`) - Used for the [AI Feature](https://www.ag-grid.com/studio/angular/ai/).
- Filters Panel (`'filters'`) - Contains page filters, widget filters, cross filters, and filters from filter widgets.
- Edit Panel (`'edit'`) - Changes function based on the UI selection to display editing controls.
- Data Panel (`'data'`) - Displays the fields available in the data.

### Configuring Panels

Which panels are displayed, and on which side, can be configured for both view mode and edit mode.

#### Configuring Panels

```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: Configuring Panels](https://www.ag-grid.com/studio/examples/modes-layout/configuring-panels/angular/)

The example above demonstrates displaying the Filters Panel on the left-hand side in edit mode (and collapsed by default via [Initial State](https://www.ag-grid.com/studio/angular/state/)). In view mode, the Filters Panel is hidden completely.

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

this.panels = {
    edit: {
        left: ['filters'],
        right: ['edit', 'data']
    },
    view: {
        left: [],
    },
};
```

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `panels` | `AgPanelConfig` |  | Configure which panels are displayed and on which side. |

Note that panels controlling editing functionality are only available in edit mode.

### Customising Panel Content

#### Customising Panel Content

```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 Panel Content](https://www.ag-grid.com/studio/examples/modes-layout/panel-content/angular/)

The content of the edit panel can be customised in multiple ways. The example above demonstrates configuring the Page tab to only show the first item (page background).

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `page` | `AgPageConfig \| ((config: AgPageConfig) => AgPageConfig)` |  | Configure page (e.g. page setup form in page tab of edit panel). |

It is also possible to [Customise the Available Widgets](https://www.ag-grid.com/studio/angular/widget-configuration#customise-the-available-widgets) and [Change the Configuration for Individual Widgets](https://www.ag-grid.com/studio/angular/widget-configuration#change-the-configuration-for-individual-widgets). See the documentation on these for examples of how to do this.

The page setup form items are set up in a similar way to the widget [Form Grouping Items](https://www.ag-grid.com/studio/angular/custom-widgets-form#form-grouping-items) and [Form Input Items](https://www.ag-grid.com/studio/angular/custom-widgets-form#form-input-items), but only a subset of input items are supported.