Angular Data GridStatus Bar Panel
angular logo

The Status Bar Panel allows you to add your own components to the grid's Status Bar. Use this when the provided status bar components do not meet your requirements.

Implementing a Status Bar Panel Component

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.

Configuring Status Bar Panels

In order to add new components to the Status Bar (or to configure the provided agAggregationComponent component) you need to provide the components and any associated information to statusBar:

this.gridOptions = {
    statusBar: {
        statusPanels: [
                statusPanel: MyStatusBarComponent
                statusPanel: 'agAggregationComponent',
                statusPanelParams : {
                    // only show count and sum ('min', 'max', 'avg' won't be shown)
                    aggFuncs: ['count', 'sum']
    // ...other properties

In the configuration above we've specified a custom component (MyStatusBarComponent) as well as the provided agAggregationComponent component.

Order is important here - the order of the components provided will determine the order in which they're rendered, from left to right.

Initialisation of Status Bar Components

The status bar components will be instantiated before the grid is fully initialised - specifically they will be initialised before any row data has been rendered.

If you have a component that you wish to work on data once it's ready (calculate the sum of a column for example) then you'll need to hook into the modelUpdated event. Remember to remove the event listener when the component is destroyed.

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

    // Remember to remove the event listener when the component is destroyed
    params.api.addEventListener('modelUpdated', () => {
        // On the modelUpdated event rows will be available
   updateStatusBar() { ... }

Accessing Status Bar Panel Instances

After the grid has created an instance of a status bar component it is possible to access that instance. This is useful if you want to call a method that you provide on the status bar component that has nothing to do with the operation of the grid. Accessing a status bar component is done using the grid API getStatusPanel(key).

The example below shows using getStatusPanel: