GrafloriaDashboardComponent

Import it from @grafloria/angular.

<grafloria-dashboard> — the dashboard kit, the Angular way.

The kit is DATA-FIRST: [views] (or [widgets] for a single unnamed view) declare the whole board, the kit wires the pack grid, gestures, and undo. This component adds the Angular idioms on top:

html
<grafloria-dashboard [views]="views" [(activeView)]="tab"
    (ready)="handle = $event" (layoutChange)="persist($event)">
  <ng-template grafloriaWidget="orders" let-data="data">…</ng-template>
</grafloria-dashboard>

snapshot() returns toJSON() — feed it back to [views]/[options] to rebuild the identical board (the kit's round-trip contract).

ts
@Component({
  selector: 'grafloria-dashboard',
  template: '',
  styles: [':host { display: block; position: relative; }'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GrafloriaDashboardComponent implements AfterViewInit, OnDestroy

Use it as <grafloria-dashboard> in a template.

Inputs

Name	Type	Description
`views?`	`DashboardViewSpec[] \| undefined`	Multi-view (tabbed) board. Mutually exclusive with `widgets`.
`widgets?`	`DashboardWidgetSpec[] \| undefined`	Single-view shorthand.
`options?`	`Partial<DashboardOptions>`	Board options: columns, gap, sizing, rtl, responsive, binder…
`activeView?`	`string \| undefined`	Two-way active view id — the tab pattern. Two-way: also emits its change.
`layout?`	`'grid' \| 'split' \| undefined`	LIVE SWITCHES — the toolbar toggles as inputs: applied at mount (over
`sizing?`	`'fit' \| 'grow' \| undefined`
`static?`	`boolean \| undefined`	Static board: the viewer's mode — no drag, no resize, no handles.

Outputs

activeViewChange
ready — The typed DashboardHandle, once the board is live.
layoutChange — Mirrors the kit's committed gestures (drag, resize, add, remove).

Properties

Name	Type	Default	Description
`views`			Multi-view (tabbed) board. Mutually exclusive with `widgets`.
`widgets`			Single-view shorthand.
`options`			Board options: columns, gap, sizing, rtl, responsive, binder…
`activeView`			Two-way active view id — the tab pattern.
`layout`			LIVE SWITCHES — the toolbar toggles as inputs: applied at mount (over `[options]`) and, when they change, through the handle (`setLayout` / `setSizing` / `setStatic`), never by remounting. 'split' is the DevExpress splitter tree; 'grid' the cell grid.
`sizing`
`static`			Static board: the viewer's mode — no drag, no resize, no handles.
`ready`			The typed DashboardHandle, once the board is live.
`layoutChange`			Mirrors the kit's committed gestures (drag, resize, add, remove).

Methods

constructor()
ngAfterViewInit(): void
getHandle(): DashboardHandle | undefined — The live handle (undefined before the first paint).
snapshot(): DashboardSnapshot | null — toJSON() — the whole board as plain data, ready to feed back in.
ngOnDestroy(): void

Was this page helpful?