Angular Embedded AnalyticsQuick 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 Copy Link

Install the ag-studio-angular package from npm:

npm install ag-studio-angular

2. Create Studio Copy Link

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:

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 Copy Link

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

Next Steps Copy Link