---
title: "Quick Start"
framework: angular
version: "2.1.2"
---

# Quick Start

AG Studio is an embedded analytics component for building interactive dashboards. This guide covers the minimum code required to render a working dashboard with a single data source and a blank canvas.

## 1. Install

Install the `ag-studio-angular` package from `npm`:

```bash
npm install ag-studio-angular
```

## 2. Create Studio

Studio works with arrays of plain objects, where each array becomes a data source.

Add the `AgStudio` standalone component to your template inside a sized parent (it automatically fills the available space) and set `mode` to `"edit"` so users can build and modify reports:

```ts
import { Component } from '@angular/core';
import { AgStudio } from 'ag-studio-angular';

// Data to display in Studio (can also be loaded asynchronously)
const productData = [
    {
        productName: 'Printer',
        category: 'Printing & Imaging',
        brand: 'CleanSlate Office',
        listPrice: 109.09,
        unitCost: 92.26,
    },
    {
        productName: 'Notebook',
        category: 'Paper & Notebooks',
        brand: 'PaperLine',
        listPrice: 24.70,
        unitCost: 14.19,
    },
    {
        productName: 'Highlighters',
        category: 'Writing Instruments',
        brand: 'PaperLine',
        listPrice: 10.34,
        unitCost: 5.03,
    },
    // ... more rows
];

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [AgStudio],
    template: `
        <div style="height: 100%; width: 100%">
            <ag-studio [data]="data" mode="edit"></ag-studio>
        </div>
    `,
})
export class AppComponent {
    data = {
        sources: [{
            id: 'products',
            data: productData,
        }],
    };
}
```

## 3. Run your app

The result is an empty AG Studio component that users can begin building reports with:

#### Quick Start Example

```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: Quick Start Example](https://www.ag-grid.com/studio/examples/quick-start/quick-start-example/angular/)

## Next Steps

**[Tutorial](https://www.ag-grid.com/studio/angular/tutorial/)**

New to AG Studio? Follow a step-by-step guide to build a complete multi-page dashboard from scratch.

**[Configuring Data](https://www.ag-grid.com/studio/angular/data/)**

Already familiar with dashboard tooling? Learn more about how to configure data.