Angular Wrapper Custom Toolbars

Adaptable allows Custom Toolbars to be included in the Dashboard.

They are defined in the customToolbars property in the Dashboard Options section of Adaptable Options.

A Custom Toolbar can be given 2 sets of content:

AngularFrameworkComponent

important

Unlike in previous versions of the Angular Wrapper, in AdapTable Rx (v9) there is no need to listen to any Dashboard Events to ensure the component is rendered

note

Similarly, when the containing tab is 'Hidden', AdapTable will automatically destroy the component

AdapTable automatically creates the AngularFrameworkComponent each time the Toolbar becomes visible.

export type AngularFrameworkComponent<T = unknown> = {
type: T;
onSetup?: ({adaptableApi}: {
adaptableApi: AdaptableApi;
}) => Partial<T>;
};

type property

A standard Angular component class (instance of https://angular.io/api/core/Type).

It is automatically instantiated or destroyed by AdapTable at runtime.

onSetup() function

If specified, this (optional) function is called after each component instantiation and the returned object properties are assigned to the component instance.

This dynamic "patch" provides a way to customize at runtime any standard or reusable component.

Adaptable Api Injection Token

An InjectionToken for the Adaptable Api is provided if communication with Adaptable is required in the component

const ADAPTABLE_API = new InjectionToken<AdaptableApi>('ADAPTABLE_API')

Putting It Together

There are just 2 steps required to create Custom Toolbar content:

tip

The code snippets are taken from a much larger example in the Angular Demo Application.

1. Create Custom Component

This is a standard Angular Component (which can itself wrap 3rd party UI Components).

In this example we provide 'MaterialMenuComponent' - a component wrapping an Angular Material Menu in a custom toolbar menu.

note

The implementation is entirely generic and reusable, as the I/O params are set via the onSetup() function

import { Component, Inject, OnInit } from '@angular/core';
import {
ADAPTABLE_API,
AdaptableApi,
} from '@adaptabletools/adaptable-angular-aggrid';
@Component({
selector: 'app-material-menu',
template: `
<button
mat-button
[matMenuTriggerFor]="menu"
[disabled]="isDisabled()"
class="ab-SimpleButton ab-SimpleButton--font-weight=normal ab-SimpleButton--variant-raised ab-SimpleButton--tone-accent"
>
Layout Menu Shortcut
</button>
<mat-menu #menu="matMenu">
<button
*ngFor="let item of menuItems"
mat-menu-item
(click)="onClick(item)"
>
{{ item }}
</button>
</mat-menu>
`,
styles: [
`
button[mat-button]:disabled {
background: initial;
}
`,
],
})
export class MaterialMenuComponent {
menuItems: string[] = [];
constructor(@Inject(ADAPTABLE_API) private adaptableApi: AdaptableApi) {
// AdaptableApi is provided by AdapTable
}
protected onClick(item: string) {
this.onItemClick(item);
}
onItemClick(item: string) {
// overwritten by onSetup() function
}
isDisabled() {
// overwritten by onSetup() function
return false;
}
}

2. Create Custom Toolbar

Import the Component and create a Custom Toolbar definition.

In the definition reference the Component in the type property (of frameworkComponent) and (optionally) provide an implementation of the onSetup() function:

import { ButtonToggleComponent } from './custom-toolbars/button-toggle.component';
.....
const adaptableOptions: AdaptableOptions = {
dashboardOptions: {
customToolbars: [
{
name: 'LayoutMenu',
title: 'Layout menu',
frameworkComponent: {
// custom component providing Angular Material menu in custom toolbar menu
type: MaterialMenuComponent,
onSetup:({adaptableApi}): Partial<MaterialMenuComponent> => {
return {
// component interacts with adaptableApi
menuItems: adaptableApi.layoutApi.getAllLayout().map(l => l.Name),
onItemClick: layoutName => {
adaptableApi.layoutApi.setLayout(layoutName);
},
// disabled state is updated by another custom toolbar (slideToggle)
isDisabled: () => {
return this.isLayoutShortcutMenuDisabled;
},
};
},
},
},
],
}
}

Further Information