This is a fairly basic example of how to get started with AdapTable Angular.
AdapTable Angular is the Angular Framework version of AdapTable - the market-leading, low code AG Grid extension.
For full information on how to use AdapTable Angular see the AdapTable Documentation.
For an absolute barebones example see the Adaptable Angular Support Template
The demo is built using these key packages:
15 is the minimium Angular version required for using Adaptable.
The main benefit of using AdapTable Angular is that it allows you to supply custom components in AdapTable in a Angular-friendly way.
For full information on how to install and use AdapTable Angular see the AdapTable Documentation. This demo showcases 3 Angular-specific features of AdapTable:
The demo illustrates how to pass custom Angular components to the Settings Panel:
const adaptableOptions: AdaptableOptions = {
// ...
settingsPanelOptions: {
customSettingsPanels: [
{
name: 'Custom Theme Settings Panel',
frameworkComponent: {
// The custom component wraps the same reusable Angular SlideToggle component which is used in the Toolbar and ToolPanel components
type: ThemeSettingsPanelComponent,
},
},
],
},
// ...
}The demo illustrates how to pass custom Angular components to the Tool Panel:
const adaptableOptions: AdaptableOptions = {
// ...
toolPanelOptions: {
toolPanelOrder: ['adaptable', 'columns', 'filters'],
customToolPanels: [
{
name: 'SlideToggle',
title: 'Slide toggle',
frameworkComponent: {
// custom Angular component for a slide component
// additional configuration is passed through the onSetup() function
type: SlideToggleComponent,
onSetup: (): Partial<SlideToggleComponent> => {
return {
// basically this ToolPanel interacts with another custom ToolPanel(layoutMenu), activating/deactivating it
onChange: toggleValue => {
this.isLayoutShortcutMenuDisabled = !toggleValue;
},
};
},
},
}
// ...
]
}
// ...
}The demo illustrates how to pass custom Angular components to the Dashboard Toolbar:
const adaptableOptions: AdaptableOptions = {
// ...
dashboardOptions: {
customToolbars: [
{
name: 'LayoutToggle',
title: 'Layout toggle',
frameworkComponent: {
// simple wrapper around Angular Material ButtonToggle component
// the implementation (and interaction with the AdaptableApi) is encapsulated in the component
type: ButtonToggleComponent,
},
},
],
}
// ...
}For more information on how to use Angular Components in AdapTable see the AdapTable Documentation.
NOTE: In order to be able to run npm install, you need to be logged into our private NPM registry - follow the instructions in the Adaptable Angular Documentation
If you do not have an Adpatable Login please contact support@adaptabletools.com
Run npm install (or yarn), depending on what tool you're using.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
An AdapTable Licence provides access to all product features as well as quarterly updates and enhancements through the lifetime of the licence, comprehensive support, and access to all 3rd party libraries.
Licences can be purchased individually, for a team, for an organisation or for integration into software for onward sale.
We can make a Trial Licence available for a short period of time to allow you to try out AdapTable for yourself.
Please contact sales@adaptabletools.com for more information.
Developers can learn how to access AdapTable programmatically at AdapTable Documentation.
Here you can see a large number of AdapTable demos each showing a different feature, function or option in AdapTable.
To see AdapTable in action visit our Demo Site which contains a few larger demos.
General information about Adaptable Tools is available at our Website
For all support enquiries please raise a Support Ticket.