Angular Data GridStatus Bar

Version 36.2.0

Enterprise

The Status Bar appears below the grid and contains Status Bar Panels. Panels can be Grid Provided Panels or Custom Status Bar Panels.

Configure the Status Bar with the statusBar grid property. The property takes a list of Status Bar Panels.

<ag-grid-angular
    [statusBar]="statusBar"
    /* other grid options ... */ />

this.statusBar = {
    statusPanels: [
        { statusPanel: 'agTotalAndFilteredRowCountComponent' },
        { statusPanel: 'agTotalRowCountComponent' },
        { statusPanel: 'agFilteredRowCountComponent' },
        { statusPanel: 'agSelectedRowCountComponent' },
        { statusPanel: 'agAggregationComponent' }
    ]
};

Some Status Panels only show when a Cell Selection is present.

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  RowSelectionModule,
  RowSelectionOptions,
  StatusBar,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  RowSelectionModule,
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
  NumberFilterModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowSelection]="rowSelection"
    [cellSelection]="true"
    [statusBar]="statusBar"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 200 },
    { field: "age", filter: "agNumberColumnFilter" },
    { field: "country", minWidth: 200 },
    { field: "year" },
    { field: "date", minWidth: 180 },
    { field: "sport", minWidth: 200 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
    filter: true,
  };
  rowSelection: RowSelectionOptions | "single" | "multiple" = {
    mode: "multiRow",
  };
  statusBar: StatusBar = {
    statusPanels: [
      { statusPanel: "agTotalAndFilteredRowCountComponent" },
      { statusPanel: "agTotalRowCountComponent" },
      { statusPanel: "agFilteredRowCountComponent" },
      { statusPanel: "agSelectedRowCountComponent" },
      { statusPanel: "agAggregationComponent" },
    ],
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

main.ts

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

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

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

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

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Provided Panels Copy Link

The Status Bar Panels provided by the grid are as follows:

agTotalRowCountComponent: Provides the total row count.
agTotalAndFilteredRowCountComponent: Provides the total and filtered row count.
agFilteredRowCountComponent: Provides the filtered row count.
agSelectedRowCountComponent: Provides the selected row count.
agAggregationComponent: Provides aggregations on the selected range.

Configuration Copy Link

The align property can be left, center or right (default).

The key is used for Accessing Panel Instances via the grid API getStatusPanel(key). This can be useful for interacting with Custom Panels.

Additional props are passed to Status Panels using statusPanelParams. The provided panel agAggregationComponent can have aggFuncs passed.

<ag-grid-angular
    [statusBar]="statusBar"
    /* other grid options ... */ />

this.statusBar = {
    statusPanels: [
        {
            key: 'aUniqueString',
            statusPanel: 'agTotalRowCountComponent',
            align: 'left'
        },
        {
            statusPanel: 'agAggregationComponent',
            statusPanelParams: {
                // possible values are: 'count', 'sum', 'min', 'max', 'avg'
                aggFuncs: ['avg', 'sum']
            }
        }
    ]
};

Labels (e.g. "Rows", "Total Rows", "Average") and number formatting are changed using the grid's Localisation.

The Aggregation Panel agAggregationComponent works with number and bigint values. When bigint values are present, avg uses integer division and discards the fractional part.

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  StatusBar,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [statusBar]="statusBar"
    [cellSelection]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 200 },
    { field: "age" },
    { field: "country", minWidth: 200 },
    { field: "year" },
    { field: "date", minWidth: 180 },
    { field: "sport", minWidth: 200 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  statusBar: StatusBar = {
    statusPanels: [
      {
        statusPanel: "agTotalRowCountComponent",
        align: "left",
      },
      {
        statusPanel: "agAggregationComponent",
        statusPanelParams: {
          aggFuncs: ["avg", "sum"],
        },
      },
    ],
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

main.ts

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

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

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

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

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

The Status Bar sizes its height to fit content. When no panels are visible, the Status Bar will have zero height (not be shown). Add CSS to have a fixed height on the Status Bar.

.ag-status-bar {
    min-height: 35px;
}

Value Formatting Copy Link

Each Status Bar Panel can have its displayed values customised using a valueFormatter function. This allows for formatting values before they are rendered in the UI.

The valueFormatter function is provided in the statusPanelParams object.

<ag-grid-angular
    [statusBar]="statusBar"
    /* other grid options ... */ />

this.statusBar = {
    statusPanels: [
        {
            statusPanel: 'agTotalAndFilteredRowCountComponent',
            statusPanelParams: {
                valueFormatter: (statusPanelValueFormatterParams) => {
                    const { value } = statusPanelValueFormatterParams;
                    if (value > 1000) {
                        return value / 1000 + ' K';
                    }
                    return String(value);
                }
            }
        },
    ]
};

IProvidedStatusPanelParams Copy Link

Properties available on the IProvidedStatusPanelParams interface.

Function

(params: IStatusPanelValueFormatterParams) => string

app.component.ts

import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IStatusPanelValueFormatterParams,
  ModuleRegistry,
  StatusBar,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [statusBar]="statusBar"
    [cellSelection]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 200 },
    { field: "age" },
    { field: "country", minWidth: 200 },
    { field: "year" },
    { field: "date", minWidth: 180 },
    { field: "sport", minWidth: 200 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  statusBar: StatusBar = {
    statusPanels: [
      {
        statusPanel: "agTotalRowCountComponent",
        align: "left",
        statusPanelParams: {
          valueFormatter: (params: IStatusPanelValueFormatterParams) => {
            const { value, bigintValue } = params;
            if (bigintValue != null) {
              return bigintValue.toString();
            }
            if (typeof value === "number" && value > 1000) {
              return (value / 1000).toFixed(1) + " K";
            }
            return String(value);
          },
        },
      },
    ],
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}

main.ts

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

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

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

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

interfaces.ts


export interface IOlympicData {
    athlete: string,
    age: number,
    country: string,
    year: number,
    date: string,
    sport: string,
    gold: number,
    silver: number,
    bronze: number,
    total: number
}

Custom Panels Copy Link

Applications that are using Server-side Data or which require bespoke Status Bar Panels can provide their own custom Status Bar panels.

Clicking on the button in the status bar will log the number of selected rows to the developer console.

app.component.ts

import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  EventApiModule,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IAggregationStatusPanelParams,
  ModuleRegistry,
  RowApiModule,
  RowSelectionModule,
  RowSelectionOptions,
  StatusBar,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  TextFilterModule,
  RowSelectionModule,
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
  RowApiModule,
  EventApiModule,
]);
import { ClickableStatusBarComponent } from "./clickable-status-bar-component.component";
import { CountStatusBarComponent } from "./count-status-bar-component.component";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [
    AgGridAngular,
    ClickableStatusBarComponent,
    CountStatusBarComponent,
  ],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowData]="rowData"
    [rowSelection]="rowSelection"
    [statusBar]="statusBar"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    {
      field: "row",
    },
    {
      field: "name",
    },
  ];
  defaultColDef: ColDef = {
    editable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
  };
  rowData: any[] | null = [
    { row: "Row 1", name: "Michael Phelps" },
    { row: "Row 2", name: "Natalie Coughlin" },
    { row: "Row 3", name: "Aleksey Nemov" },
    { row: "Row 4", name: "Alicia Coutts" },
    { row: "Row 5", name: "Missy Franklin" },
    { row: "Row 6", name: "Ryan Lochte" },
    { row: "Row 7", name: "Allison Schmitt" },
    { row: "Row 8", name: "Natalie Coughlin" },
    { row: "Row 9", name: "Ian Thorpe" },
    { row: "Row 10", name: "Bob Mill" },
    { row: "Row 11", name: "Willy Walsh" },
    { row: "Row 12", name: "Sarah McCoy" },
    { row: "Row 13", name: "Jane Jack" },
    { row: "Row 14", name: "Tina Wills" },
  ];
  rowSelection: RowSelectionOptions | "single" | "multiple" = {
    mode: "multiRow",
  };
  statusBar: StatusBar = {
    statusPanels: [
      {
        statusPanel: CountStatusBarComponent,
      },
      {
        statusPanel: ClickableStatusBarComponent,
      },
      {
        statusPanel: "agAggregationComponent",
        statusPanelParams: {
          aggFuncs: ["count", "sum"],
        } as IAggregationStatusPanelParams,
      },
    ],
  };
}

styles.css

.container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 5px;
    background-color: lightgrey;
    padding: 3px 5px 3px 5px;
    border-radius: 5px;
}

.component {
    margin-left: 5px;
    padding-top: 0;
    padding-bottom: 0;
}

.status-bar-input {
    height: initial !important;
}

clickable-status-bar-component.component.ts

import { Component } from '@angular/core';

import type { IStatusPanelAngularComp } from 'ag-grid-angular';
import type { IStatusPanelParams } from 'ag-grid-community';

@Component({
    standalone: true,
    template: `
        <div class="ag-status-name-value">
            <span class="component">
                Status Bar Component
                <input class="status-bar-input" type="button" (click)="onClick()" value="Click Me" />
            </span>
        </div>
    `,
})
export class ClickableStatusBarComponent implements IStatusPanelAngularComp {
    private params!: IStatusPanelParams;

    agInit(params: IStatusPanelParams): void {
        this.params = params;
    }

    onClick(): void {
        console.log('Selected Row Count: ' + this.params.api.getSelectedRows().length);
    }
}

count-status-bar-component.component.ts

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';

import type { IStatusPanelAngularComp } from 'ag-grid-angular';
import type { IStatusPanelParams } from 'ag-grid-community';

@Component({
    standalone: true,
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `
        <div class="ag-status-name-value">
            <span>Row Count Component&nbsp;:</span>
            <span class="ag-status-name-value-value">{{ count() }}</span>
        </div>
    `,
})
export class CountStatusBarComponent implements IStatusPanelAngularComp {
    count = signal<number | undefined>(undefined);

    agInit(params: IStatusPanelParams): void {
        params.api.addEventListener('rowDataUpdated', (event) => {
            this.count.set(event.api.getDisplayedRowCount());
        });
    }
}

main.ts

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

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

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

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

Implement this interface to create a status bar component.

interface IStatusPanelAngularComp {
    // mandatory methods

    // The agInit(params) method is called on the status bar component once.
    // See below for details on the parameters.
    agInit(params: IStatusPanelParams): void;

    // optional methods

    // Called when the `statusBar` grid option is updated.
    // If this method returns `true`, the grid assumes that
    // the status panel has updated with the latest params,
    // and takes no further action. If this method returns `false`,
    // or is not implemented, the grid will destroy and
    // recreate the status panel.
    refresh(params: IStatusPanelParams): boolean;
}

The agInit(params) method takes a params object with the items listed below:

Properties available on the IStatusPanelParams<TData = any, TContext = any> interface.

string

GridApi

The grid api.

TContext

Application context as set on gridOptions.context.

Custom Panels are configured alongside Provided Panels.

this.gridOptions = {
    statusBar: {
        statusPanels: [
            {
                statusPanel: MyStatusBarComponent
            },
            {
                statusPanel: 'agAggregationComponent'
            }
        ]
    },
    // ...other properties
}

Custom Panels can listen to grid events to react to grid changes. An easy way to listen to grid events from inside a Status Panel is using the API provided via props.

class ClickableStatusBarComponent() {
    agInit(params: IStatusPanelParams) {
        this.params = params;

        // Remove event listener when destroyed
        params.api.addEventListener('modelUpdated', () => {
            // On the modelUpdated event rows will be available
            this.updateStatusBar();
        });
    }
    updateStatusBar() { ... }
}

Accessing Instances Copy Link

Use the grid API getStatusPanel(key) to access a panel instance. This can be used to expose Custom Panels to the application.

Function

Gets the status panel instance corresponding to the supplied id.

StatusBarModule

Clicking on the button in the status bar will log the number of selected rows to the developer console.

app.component.ts

import { Component } from "@angular/core";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowSelectionModule,
  RowSelectionOptions,
  StatusBar,
  TextEditorModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import { CellSelectionModule, StatusBarModule } from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextEditorModule,
  TextFilterModule,
  RowSelectionModule,
  ClientSideRowModelModule,
  CellSelectionModule,
  StatusBarModule,
]);
import { ClickableStatusBarComponent } from "./clickable-status-bar-component.component";

export interface IClickableStatusBar {
  setVisible(visible: boolean): void;
  isVisible(): boolean;
}

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular, ClickableStatusBarComponent],
  template: `<button
      (click)="toggleStatusBarComp()"
      style="margin-bottom: 10px"
    >
      Toggle Status Bar Component
    </button>
    <ag-grid-angular
      style="width: 100%; height: 90%;"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData"
      [rowSelection]="rowSelection"
      [statusBar]="statusBar"
      (gridReady)="onGridReady($event)"
    /> `,
})
export class AppComponent {
  private gridApi!: GridApi;

  columnDefs: ColDef[] = [
    {
      field: "row",
    },
    {
      field: "name",
    },
  ];
  defaultColDef: ColDef = {
    editable: true,
    flex: 1,
    minWidth: 100,
    filter: true,
  };
  rowData: any[] | null = [
    { row: "Row 1", name: "Michael Phelps" },
    { row: "Row 2", name: "Natalie Coughlin" },
    { row: "Row 3", name: "Aleksey Nemov" },
    { row: "Row 4", name: "Alicia Coutts" },
    { row: "Row 5", name: "Missy Franklin" },
    { row: "Row 6", name: "Ryan Lochte" },
    { row: "Row 7", name: "Allison Schmitt" },
    { row: "Row 8", name: "Natalie Coughlin" },
    { row: "Row 9", name: "Ian Thorpe" },
    { row: "Row 10", name: "Bob Mill" },
    { row: "Row 11", name: "Willy Walsh" },
    { row: "Row 12", name: "Sarah McCoy" },
    { row: "Row 13", name: "Jane Jack" },
    { row: "Row 14", name: "Tina Wills" },
  ];
  rowSelection: RowSelectionOptions | "single" | "multiple" = {
    mode: "multiRow",
  };
  statusBar: StatusBar = {
    statusPanels: [
      {
        statusPanel: ClickableStatusBarComponent,
        key: "statusBarCompKey",
      },
      {
        statusPanel: "agAggregationComponent",
        statusPanelParams: {
          aggFuncs: ["count", "sum"],
        },
      },
    ],
  };

  toggleStatusBarComp() {
    const statusBarComponent =
      this.gridApi.getStatusPanel<IClickableStatusBar>("statusBarCompKey")!;
    statusBarComponent.setVisible(!statusBarComponent.isVisible());
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;
  }
}

styles.css

.container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: 5px;
    padding: 3px 5px 3px 5px;
    border-radius: 5px;
}

.component {
    margin-left: 5px;
    padding-top: 0;
    padding-bottom: 0;
}

clickable-status-bar-component.component.ts

import { Component } from '@angular/core';

import type { IStatusPanelAngularComp } from 'ag-grid-angular';
import type { IStatusPanelParams } from 'ag-grid-community';

@Component({
    standalone: true,
    template: `
        @if (visible) {
            <div class="container">
                <div>
                    <span class="component"
                        >Status Bar Component <input type="button" (click)="onClick()" value="Click Me"
                    /></span>
                </div>
            </div>
        }
    `,
})
export class ClickableStatusBarComponent implements IStatusPanelAngularComp {
    public params!: IStatusPanelParams;
    public visible = true;

    agInit(params: IStatusPanelParams): void {
        this.params = params;
    }

    onClick(): void {
        console.log('Selected Row Count: ' + this.params.api.getSelectedRows().length);
    }

    setVisible(visible: boolean) {
        this.visible = visible;
    }

    isVisible(): boolean {
        return this.visible;
    }
}

main.ts

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

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

if (new URLSearchParams(window.location.search).get('prod') !== 'false') {
    enableProdMode();
}

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

Getting Started

AI Features

Layout & Styling

Charting

Core Features

Advanced Features

Angular Data GridStatus Bar

Provided Panels Copy Link

Configuration Copy Link

Value Formatting Copy Link

IProvidedStatusPanelParams Copy Link

Custom Panels Copy Link

Accessing Instances Copy Link