Using the Angular Wrapper

Instantiation of the Angular Wrapper is straightforward.

There are 2 components that are required:

  • ag-grid-angular - the ag-Grid Angular component.

  • adaptable-angular-aggrid - the AdapTable Angular AdaptableAngularAgGridModule component.

warning

Version 7 of AdapTable introduced a change to how the Angular Wrapper is instantiated, in particular by requiring both these 2 components to be provided.

caution

AdapTable Version 7.0 requires the use of Angular 9 or higher.

ag-grid-angular

Create the standard ag-Grid gridOptions object and pass it in to the component.

note

Unlike in the 'vanilla' version, you do not need to set the modules property of GridOptions as you will pass that directly to both components (see below).

Also add any ag-Grid modules you require (see below for more details)

<ag-grid-angular
[gridOptions]="gridOptions"
[rowData]="rowData"
[modules]="agGridModules"
style="height: 90vh"
class="ag-theme-alpine"
>
</ag-grid-angular>

adaptable-angular-aggrid

In your app, import the AdaptableAngularAgGridModule

import { AdaptableAngularAgGridModule } from '@adaptabletools/adaptable-angular-aggrid';

There are 4 properties of interest:

  • gridOptions (mandatory)

    The standard ag-Grid GridOptions object used for building column schema and setting key grid properties.

    important

    This must be the same GridOptions object that you pass into the <ag-grid-angular> component

    tip

    It is advisable to set the AdapTable ColumnType property when defining each Column in the schema

  • modules (optional)

    Any ag-Grid Enterprise modules you require (see Enterprise Modules below for more details)

  • adaptableOptions (mandatory)

    This is the standard AdapTable Options object that contains all the settings and options required for configuring and managing AdapTable.

    warning

    Do not set the vendorGrid property of Adaptable Options as this is provided in the gridOptions prop.

  • adaptableReady: (adaptableApi: AdaptableApi, vendorGrid: GridOptions) (optional)

    The Adaptable Ready Event that AdapTable fires when its finished initialising.

    The callback function provides access to 2 important objects:

    • The AdapTable API object. The api contains hundreds of methods providing full, safe, runtime access to all the functionality in AdapTable.

    • The underlying Vendor DataGrid instance being used - in this case GridOptions from ag-Grid.

caution

AdapTable enriches the 'gridOptions' it receives with varrious properties and enhancements, so if you want run-time access to the underlying gridOptions instance that you created, then you should use this object.

<!-- component.html -->
<adaptable-angular-aggrid
[adaptableOptions]="adaptableOptions"
[gridOptions]="gridOptions"
(adaptableReady)="onAdaptableReady($event)"
[modules]="agGridModules"
>
</adaptable-angular-aggrid>
<ag-grid-angular
[gridOptions]="gridOptions"
[modules]="agGridModules"
style="height: 90vh"
class="ag-theme-alpine"
>
</ag-grid-angular>
// component.ts
onAdaptableReady({
adaptableApi,
vendorGrid,
}: {
adaptableApi: AdaptableApi;
vendorGrid: GridOptions;
}) {
adaptableApi.eventApi.on('SelectionChanged', selection => {
// do stuff
});
}

Plugins

Plugins are referenced the same way as for 'Core' AdapTable - through the plugins section of AdapTableOptions:

import charts from '@adaptabletools/adaptable-plugin-charts';
const adaptableOptions: AdaptableOptions = {
primaryKey: 'tradeId',
adaptableId: 'react demo',
....
plugins: [charts()]
};

agGrid Enterprise Modules

AdapTable allows you to choose which ag-Grid Enterprise modules you want use in your project.

However to make sure that everything is properly wired together please follow these steps:

note

We are using Menus and RangeSelection in this example but they can be any ag-Grid Modules

  1. Install the modules in npm:

    npm i @ag-grid-enterprise/menu
    npm i @ag-grid-enterprise/range-selection
  2. Import them into your code:

    import { MenuModule } from '@ag-grid-enterprise/menu';
    import { RangeSelectionModule } from '@ag-grid-enterprise/range-selection';
  3. Create a Modules array

    export class AppComponent {
    ...
    public agGridModules: Module[] = [MenuModule, RangeSelectionModule];
    ....
    }
  4. Add the array to the AdaptableAngular Component:

    <adaptable-angular-aggrid
    ....
    [modules]="agGridModules"
    .....
    >
    </adaptable-angular-aggrid>
  1. Add the same array to the AgGridAngular Component:

    <ag-grid-angular
    ....
    [modules]="agGridModules"
    ....
    >
    </ag-grid-angular>
    })

AdapTable Tool Panel Component

To set up the Adaptable Tool Panel while using the Angular Wrapper, you need to follow these 3 steps:

  1. Explicitly import it in your code, e.g.:

    import { AdaptableToolPanelAgGridComponent } from '@adaptabletools/adaptable/src/AdaptableComponents';
  2. Reference the Component in the components section of ag-Grid GridOptions (and make sure the sideBar property is set also):

    const gridOptions = {
    sideBar: true,
    components: {
    AdaptableToolPanel: AdaptableToolPanelAgGridComponent
    },
    };
  3. Ensure that the showAdaptableToolPanel property is set to true (the default value) in User Interface Options section of AdaptableOptions:

    const adaptableOptions = {
    adaptableId: 'angularapp',
    userInterfaceOptions: {
    showAdaptableToolPanel: true
    }
    };

Putting It All Together

This example is taken from the Angular Example App and shows an Angular AdapTable instance with dummy ticking data:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AdaptableAngularAgGridModule } from '@adaptabletools/adaptable-angular-aggrid';
import { AgGridModule } from '@ag-grid-community/angular';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
imports: [
BrowserModule,
FormsModule,
AdaptableAngularAgGridModule,
HttpClientModule,
AgGridModule.withComponents([])
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
// app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {
GridApi,
GridOptions,
Module,
ColDef
} from '@ag-grid-community/all-modules';
import { AllEnterpriseModules } from '@ag-grid-enterprise/all-modules';
import {
AdaptableOptions,
AdaptableToolPanelAgGridComponent
} from '@adaptabletools/adaptable-angular-aggrid';
import charts from '@adaptabletools/adaptable-plugin-charts';
import finance from '@adaptabletools/adaptable-plugin-finance';
import orders from '../orders.json';
const MAX_DATA_COUNT = 100;
orders.length = Math.min(MAX_DATA_COUNT, orders.length);
@Component({
selector: 'adaptable-root',
template: `
<adaptable-angular-aggrid
[adaptableOptions]="adaptableOptions"
(adaptableReady)="adaptableReady($event)"
[gridOptions]="gridOptions"
[modules]="agGridModules"
>
</adaptable-angular-aggrid>
<ag-grid-angular
[gridOptions]="gridOptions"
[rowData]="rowData"
[modules]="agGridModules"
style="flex: 1"
class="ag-theme-balham"
>
</ag-grid-angular>
`,
styles: [
`
:host {
height: 100vh;
display: flex;
flex-flow: column;
}
`
]
})
export class AppComponent {
public agGridApi: GridApi;
public adaptableApi: AdaptableApi
public agGridModules: Module[] = AllEnterpriseModules;
public columnDefs;
public rowData: any[];
public gridOptions: GridOptions;
public adaptableOptions: AdaptableOptions = {
primaryKey: 'OrderId',
userName: 'demo user',
adaptableId: 'angular wrapper demo',
plugins: [charts(), finance()],
userInterfaceOptions: {
showAdaptableToolPanel: true
}
};
constructor(private http: HttpClient) {
this.http = http;
this.columnDefs = [
{ field: 'OrderId', type: 'abColDefNumber', resizable: true },
{ field: 'CompanyName', type: 'abColDefString' },
{ field: 'ContactName', type: 'abColDefString' },
{ field: 'Employee', type: 'abColDefString' },
{ field: 'OrderCost', type: 'abColDefNumber' },
{ field: 'ItemCost', type: 'abColDefNumber' },
{ field: 'PackageCost', type: 'abColDefNumber' }
].map((c: ColDef) => {
c.filter = true;
c.floatingFilter = true;
return c;
});
this.gridOptions = {
enableRangeSelection: true,
sideBar: true,
components: {
AdaptableToolPanel: AdaptableToolPanelAgGridComponent
},
columnDefs: this.columnDefs,
rowData: this.rowData,
onGridReady: this.onGridReady
};
}
adaptableReady = ({ adaptableApi, vendorGrid }) => {
this.adaptableApi = adaptableApi;
// use AdaptableApi for runtime access to Adaptable
};
onGridReady = params => {
this.agGridApi = params.api;
setTimeout(() => {
this.gridApi.setRowData(orders);
}, 500);
};
}

Other Resources

For a standalone working example app of the Angular Wrapper, see the Angular Example App