A Custom Toolbar can be given 2 sets of content:
- Adaptable Buttons - via the
toolbarButtonsproperty (see Dashboard for more information)
- An AngularFrameworkComponent (to populate the
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
Similarly, when the containing tab is 'Hidden', AdapTable will automatically destroy the component
AdapTable automatically creates the AngularFrameworkComponent each time the Toolbar becomes visible.
A standard Angular component class (instance of https://angular.io/api/core/Type).
It is automatically instantiated or destroyed by AdapTable at runtime.
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
Putting It Together
There are just 2 steps required to create Custom Toolbar content:
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.
The implementation is entirely generic and reusable, as the I/O params are set via the onSetup() function
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