AdapTable Angular
Custom Components

Angular Custom Settings Panels

Summary

  • Developers using AdapTable Angular can provide Custom Settings Panels
  • This is done by leveraging AngularFrameworkComponent

AdapTable Angular allows developer to provide custom panels in the Settings Panel in an "Angular" way.

Developer Guide

Providing a Custom Settings Panel in AdapTable Angular

@Component({
  selector: 'theme-settings-panel',
  template: `
    <h3>Custom Theme Settings Panel</h3>
    <p>Current Theme is {{ currentTheme }}</p>
    <div class="themeToggle">
      <span>Switch to </span> 
      <slide-toggle></slide-toggle>
    </div>
  `,
  styles: [
    `
      .themeToggle {
        display: flex;
        gap: calc(var(--ab-base-space) * 2);
        align-items: center;
      }
    `,
  ],
})
export class ThemeSettingsPanelComponent implements AfterViewInit {
  @ViewChild(SlideToggleComponent) childSlideComponent: SlideToggleComponent;

  currentTheme: string;

  constructor(@Inject(ADAPTABLE_API) private adaptableApi: AdaptableApi) {
    this.currentTheme = this.adaptableApi.themeApi.getCurrentTheme();
    this.adaptableApi.eventApi.on('ThemeChanged', () => {
      this.currentTheme = this.adaptableApi.themeApi.getCurrentTheme();
    });
  }

  ngAfterViewInit() {
    this.childSlideComponent.onText = 'Light';
    this.childSlideComponent.offText = 'Dark';
    this.childSlideComponent.onColor = '#c0ce28';
    this.childSlideComponent.offColor = '#01222c';

    this.childSlideComponent.onChange = (toggleValue: boolean) => {
      if (toggleValue) {
        this.adaptableApi.themeApi.loadDarkTheme();
      } else {
        this.adaptableApi.themeApi.loadLightTheme();
      }
    };
  }
}
1
Define the Template Component

In this example we are providing a Theme Setting Component

Note

It re-uses (and customizes) the exact same SlideToggle component which was already provided as a custom Toolbar and a custom Tool Panel.

const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    customSettingsPanels: [
      {
        name: 'Custom Theme Settings Panel',
        frameworkComponent: {
          // The custom component wraps the same reusable Angular toggle component 
          // which is used in the Toolbar and ToolPanel components
          type: ThemeSettingsPanelComponent,
        },
        icon: {
          name: 'theme',
        },
      },
    ],
  },
}
2
Reference the Settings Panel in Settings Panel Options

Reference the Component created in Step 1 to the customSettingsPanels collection in Settings Panel Options.

This has 2 properties:

  • frameworkComponent - the Component to be added
  • name - how it is referenced in AdapTable
const adaptableOptions: AdaptableOptions = {
  settingsPanelOptions: {
    navigation: {
      items: [
        'Custom Theme Settings Panel',
        '-',
        'CalculatedColumn',
        'FormatColumn',
        '-',
        'Dashboard',
        'ToolPanel',
      ],
    },
  },
}
3
Specify location in Settings Panel for Custom Panel (optional)

By default, the Custom Settings Panel will be placed at the end of the list of Panels in the left hand side of the window.

If that is not desired behaviour, use the navigation property of Settings Panel Options to set the desired order of Panels:

This property allows you to set the order (and visibility) of Settings Panels together with any separators.

Angular Components: Custom Settings Panel
Fork
  • In this demo we provide a custom Settings Panel with a SlideToggle button switching between the Light and Dark Themes
  • It re-uses (and customizes) the exact same SlideToggle component which was provided in custom Toolbar and Tool Panel demos above

Expand to see more

PreviousTool PanelNextPopups