@dashboard-designer/angular12

Angular 12–15 NgModule wrappers for the React @dashboard-designer/ui designer and viewer.

For Angular 17+, use @dashboard-designer/angular instead.

Quick start

npm i @dashboard-designer/angular12 @dashboard-designer/ui @dashboard-designer/core react react-dom@18

/* global styles */
@import '@dashboard-designer/ui/styles.css';

import { DashboardDesignerModule } from '@dashboard-designer/angular12';

@NgModule({ imports: [DashboardDesignerModule] })
export class FeatureModule {}

<dd-dashboard-designer
  [apiBaseUrl]="'http://localhost:4000'"
  [auth]="auth"
  [dashboard]="dashboard"
  [readOnly]="!isEditing"
  [allowEdit]="canEdit"
  (dashboardChange)="dashboard = $event"
  (dashboardSave)="onSave($event)"
  (toggleEdit)="isEditing = !isEditing"
></dd-dashboard-designer>

Full implementation guide

See USAGE.md for:

• Every input/output property explained
• Dashboard JSON shape
• Edit → Save → View workflow
• .NET API setup and authentication
• Database connections
• Complete Angular page example
• Troubleshooting

Selectors

| Selector | Purpose | |----------|---------| | dd-dashboard-designer | Designer + optional viewer (readOnly) | | dd-dashboard-viewer | Read-only embed |

Peer dependencies

• @angular/core / @angular/common 12–15
• react / react-dom ^18
• @dashboard-designer/ui + @dashboard-designer/core