AdapTable Angular
Custom Components

Angular Custom Popups

Summary

  • Developers using AdapTable Angular can create 2 types of Popups:
    • Custom Windows
    • Progress Indicators
  • Both are provided by leveraging AngularFrameworkComponent

Custom Window

Users of AdapTable Angular can provide Angular-specific instances of Custom Windows.

Developer Guide

Providing a Custom Window in AdapTable Angular

These are the steps required to display a Custom Window in AdapTable Angular

Find Out More

See the Developer Guide to displaying Custom Windows for full details on the objects used

@Component({
  selector: 'quick-search',
  template: `
    <div class="quickSearchComponent">
      <input
        type="text"
        [disabled]="isDisabled"
        (input)="onSearchChange($event)" />
      <button
        type="button"
        [disabled]="isDisabled"
        (click)="resetQuickSearch()">
        Clear
      </button>
    </div>
  `,
  styles: [
    `
      :host {
        background: var(--ab-color-defaultbackground);
      }
      .quickSearchComponent {
        display: flex;
        align-items: center;
        gap: calc(var(--ab-base-space) * 2);
        padding: calc(var(--ab-base-space) * 2);
      }
    `,
  ],
})
export class QuickSearchComponent {
  constructor(@Inject(ADAPTABLE_API) private adaptableApi: AdaptableApi) {}

  onSearchChange(event: any) {
    const searchTerm = event.target?.value || '';
    this.adaptableApi.quickSearchApi.runQuickSearch(searchTerm);
  }

  resetQuickSearch() {
    this.adaptableApi.quickSearchApi.clearQuickSearch();
  }
}
1
Create the Angular Component

This is a standard Angular Component of type AngularFrameworkComponent.

It can be as complicated and configurable as required.

Developers will typically provide a reference to the Adaptable API for use when controls in the Panel are accessed.

const config: CustomWindowConfig = {
  id: 'quick_search',
  title: 'Custom Quick Search',
  icon: 'search',
  position: {x: 100, y: 100},
  size: {width: 400, height: 300},
  frameworkComponent: {
    type: QuickSearchComponent,
  },
};
2
Create Custom Window Config

Create an instance of the CustomWindowConfig object.

Add id, title, icon, size and position props as required.

Reference the Angular Component created in Step 1 as the frameworkComponent property

adaptableApi.userInterfaceApi.openCustomWindowPopup(config);
3
Open Custom Window using User Interface API

Call openCustomWindowPopup function in UserInterfaceApi to display the Custom Window, passing in the Config created in the previous step

adaptableApi.userInterfaceApi.closeCustomWindowPopup('quick_search');
4
Optionally close Custom Window using User Interface API

Optionally close the Custom Window via the closeCustomWindowPopup function in UserInterfaceApi (passing in the id of the Window)

Angular Components as Custom Windows
Fork
  • In this demo we create a Custom Window that runs Quick Search using a bespoke Angular Framework Component
  • The Component is displayed by clicking the 'Run Custom Quick Search' Dashboard Button
  • Click on Show Code to see how we create and wire up the Custom Component

Progress Indicator

Users of AdapTable Angular can provide Angular-specific instances of Progress Indicators.

Developer Guide

Providing a Custom Progress Indicator in AdapTable Angular

@Component({
  selector: 'progress-indicator',
  template: `
    <div class="progressIndicator">
      <p>Fetching your data</p>
      <p>Please be patient</p>
    </div>
  `,
  styles: [
    `
      .progressIndicator {
        display: flex;
        flex-direction: column;
        padding: 5px;
        color: brown;
        background-color: lightgoldenrodyellow;
        align-items: center;
        gap: calc(var(--ab-base-space) * 2);
      }
    `,
  ],
})
export class ProgressIndicator {
  constructor(@Inject(ADAPTABLE_API) private adaptableApi: AdaptableApi) {}

  // do additional stuff
}
1
Create the Angular Component

This is a standard Angular Component.

It can be as complicated and configurable as required.

const config: ProgressIndicatorConfig = {
  text: 'Custom Indicator',
  renderMode: 'content', // default value
  frameworkComponent: {
    type: ProgressIndicator,
  },
};
2
Create the Progress Indicator

Create an instance of the ProgressIndicatorConfig object

Add text and renderMode props if required

Reference the Angular Component created in Step 1 as the frameworkComponent property

adaptableApi.userInterfaceApi.showProgressIndicator(config);
3
Open Progress Indicator using User Interface API

Call showProgressIndicator function in UserInterfaceApi to display the Progress Indicator, passing in the Config created in the previous step

adaptableApi.userInterfaceApi.hideProgressIndicator();
4
Close Progress Indicator using User Interface API

On completion of the long-running operation, hide the Progress Indicator using hideProgressIndicator function in UserInterfaceApi

Angular Components as Progress Indicators
Fork
  • In this demo we create a Progress Indicator using Angular Framework Component
  • The Component is displayed by clicking the 'Show Custom Progress Indicator' Dashboard Button
  • Click on Show Code to see how we create and wire up the Custom Progress Indicator
PreviousSettings PanelNextAdapTable Vue