Angular

A standalone component, built on the same framework-free renderer as Vue and Elements.

Install

bash

npm install @datastripes/dashboard @angular/core @angular/common

Basic usage

import { Component } from '@angular/core';
import { DatastripesDashboardComponent } from '@datastripes/dashboard/angular';
import type { DashboardConfig } from '@datastripes/dashboard';

@Component({
  standalone: true,
  imports: [DatastripesDashboardComponent],
  template: `
    <datastripes-dashboard
      [data]="rows"
      [config]="config"
      mode="edit"
      [apiKey]="apiKey"
      (changeConfig)="config = $event"
      (save)="persist($event)"
    />
  `
})
export class DashboardPageComponent {
  rows = myRows;
  config?: DashboardConfig;
  apiKey = '...';

  persist(saved: DashboardConfig) {
    // ...
  }
}

Inputs & outputs

Name	Kind	Notes
data	@Input	Row array
config	@Input	Optional DashboardConfig
mode	@Input	'view' \| 'edit'
apiKey	@Input	Checked on mount via checkLicense()
changeConfig	@Output	Emits the updated DashboardConfig on every mutation
save	@Output	Emits via the component's `triggerSave()` method

Like Vue, the Angular component currently has no built-in toolbar/wizard/settings UI — that's React-only today. Drive DashboardStore directly from your own template if you need those controls; see DashboardStore.