@fusionboard/angular

Angular bindings for FusionBoard — injectable service, directives, and standalone components.

Installation

npm install @fusionboard/core @fusionboard/angular

Usage

Service Setup

import { LocalStorageAdapter } from '@fusionboard/core';
import { FusionBoardService, FUSIONBOARD_STORAGE } from '@fusionboard/angular';

// In your component or module providers:
providers: [
  FusionBoardService,
  { provide: FUSIONBOARD_STORAGE, useValue: new LocalStorageAdapter('my-app') },
]

Using the Service

@Component({ ... })
export class DashboardComponent {
  constructor(private fb: FusionBoardService) {
    fb.theme$.subscribe(theme => this.applyTheme(theme));
    fb.views$.subscribe(views => this.views = views);
    fb.gridSelection$.subscribe(rows => this.updateChart(rows));
  }

  toggleTheme() { this.fb.toggleTheme(); }
  async save() { await this.fb.saveView('My View', this.getCurrentState()); }
  async apply(id: string) { await this.fb.applyView(id); }
}

Directives

<!-- Auto-applies FusionBoard theme to AG Grid -->
<ag-grid-angular fbAgGrid [rowData]="data" ...></ag-grid-angular>

<!-- Auto-applies theme CSS vars to a chart container -->
<div fbChart><canvas #chart></canvas></div>

Standalone Components

<fb-saved-views [getCurrentState]="getState" (viewApplied)="onApply($event)"></fb-saved-views>
<fb-export-button label="CSV" (exportClick)="exportCsv()"></fb-export-button>

Peer Dependencies

• @angular/core >= 16.0.0
• @angular/common >= 16.0.0
• @angular/forms >= 16.0.0
• @fusionboard/core >= 0.1.0
• rxjs >= 7.0.0