AdapTable Angular

AdapTable Angular Custom Components

Summary

  • There are 4 Custom Components that you can provide to AdapTable Angular
  • These are designed to extend and complement the main UI Components that AdapTable provides
  • They all use AngularFrameworkComponent internally
  • The Components which can be provided include:
    • Custom Toolbars in the Dashboard
    • Custom ToolPanels in the Adaptable Tool Panel Component
    • Custom Section in the Settings Panel
    • Custom Windows & Progress Indicators

AdapTable is designed to be extensible.

We expect developers to add additional, bespoke Angular components to meet their requirements.

In particular there are many different types of custom content which can be provided:

AngularFrameworkComponent

All Custom Components which target AdapTable Angular leverage the AngularFrameworkComponent function.

This generic function receives a type and an onSetup function as inputs and returns a Component.

The full definition is as follows:

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

Note

  • In all instances the AngularFrameworkComponent function will be automatically invoked by AdapTable each time its containing element (Toolbar, Tool Panel or SettingsPanel) becomes visible
  • Similarly, AdapTable automatically unmounts the component when the containing element is hidden

type property

This is 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 subsequent communication with AdapTable is required in the component:

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

Find Out More

PreviousDemo AppsNextToolbar