Using the Angular Wrapper

Instantiation of the Angular Wrapper is straightforward.

In addition to the usual AG Grid usage, the adaptableOptions property is required to extend the grid with the AdapTable features.

caution

AdapTable 9 requires the use of Angular 10 or higher.

ag-grid-angular

All that is needed to get started, is to define the standard ag-grid-angular component but, additionally, provide the adaptableOptions property:

warning

AdapTable 9 introduced a change to how the Angular Wrapper is instantiated and now only one Component is required.

note

The previous usage - which required 2 components - has been deprecated but is still supported.

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

In your app, import the AdaptableAngularAgGridModule

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

There are 4 properties of interest:

gridOptions

This is the standard AG Grid GridOptions object which is used for building column schema, providing data and setting key grid properties.

caution

This is a mandatory property

tip

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

note

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

adaptableOptions

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

caution

This is a mandatory property

tip

Make sure to set a PrimaryKey property and also provide the adaptableId and licenseKey properties

warning

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

modules

The modules property receives an array of ag-grid Enterprise Modules - see below for more details

caution

This is a mandatory property

adaptableReady

The AdaptableReadyEvent fires as soon as AdapTable has finished initialising.

caution

This is an optional property

The AdaptableReadyEvent is defined as follows:

onAdaptableReady?: (adaptableReadyInfo: AdaptableReadyInfo) => void;

The callback function provides access to 2 important objects:

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

  2. The underlying Vendor DataGrid instance being used - in this case GridOptions from AG Grid.

tip

AdapTable enriches the 'gridOptions' it receives with modules and other properties, so if you want access to the underlying gridOptions instance that you created, then you should use this object.

<!-- component.html -->
<ag-grid-angular
[adaptableOptions]="adaptableOptions"
[gridOptions]="gridOptions"
[modules]="agGridModules"
(adaptableReady)="onAdaptableReady($event)"
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
});
}

Adaptable Plugins

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

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

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 AgGridAngular Component:

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

AdapTable ToolPanel Component

To set up the Adaptable ToolPanel Component 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 = {
    licenseKey: '<ADAPTABLE_LICENSE_KEY_HERE>',
    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
} from '@adaptabletools/adaptable-angular-aggrid';
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: `
<ag-grid-angular
[adaptableOptions]="adaptableOptions"
[gridOptions]="gridOptions"
[rowData]="rowData"
[modules]="agGridModules"
(adaptableReady)="adaptableReady($event)"
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 = {
licenseKey: '<ADAPTABLE_LICENSE_KEY_HERE>',
primaryKey: 'OrderId',
userName: 'demo user',
adaptableId: 'angular wrapper demo',
plugins: [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