Dashboard Grid for Angular

import { AuiDashboardGrid, AuiDashboardCatalog } from '@absoluteui/angular/dashboard-grid';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Dashboard Grid page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { dashboardGrid: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import type { DashboardGridLayoutChangeDetail, DashboardItem } from '@absoluteui/components/dashboard-grid';
import { AuiDashboardGrid } from '@absoluteui/angular/dashboard-grid';

@Component({
  selector: 'app-overview',
  imports: [AuiDashboardGrid],
  template: `
    <aui-dashboard-grid label="Overview" [items]="items" [editable]="true" (layoutChanged)="save($event)">
      <section data-aui-item="sales"><h2>Sales</h2></section>
      <section data-aui-item="users"><h2>Active users</h2></section>
    </aui-dashboard-grid>`,
})
export class OverviewComponent {
  readonly items: DashboardItem[] = [
    { id: 'sales', x: 0, y: 0, w: 6, h: 2 },
    { id: 'users', x: 6, y: 0, w: 6, h: 2 },
  ];

  save(detail: DashboardGridLayoutChangeDetail): void {
    // persist detail.layouts
  }
}

<aui-dashboard-grid>

Class AuiDashboardGrid; template reference #ref="auiDashboardGrid".

AbsoluteUI Dashboard Grid with projected item elements (data-aui-item on each child): <aui-dashboard-grid label="Overview" [(items)]="items" [editable]="editing"> <aui-dashboard-widget data-aui-item="sales" title="Sales">...</aui-dashboard-widget> </aui-dashboard-grid>. The children stay Angular-managed; the grid positions them and, in edit mode, adds move handles. [(items)] and [(layouts)] follow user moves and resizes.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
label	string		Required. Accessible name of the dashboard region (aria-label on the host). Non-empty.
breakpoints	readonly DashboardBreakpoint[]	'[object Object],[object Object],[object Object]'	{ name, minWidth (CSS px of the host width, >= 0), columns (integer 1..48) }; unique names; one breakpoint must have minWidth 0.
editable	boolean	false	Edit mode: move handles, resize grips, keyboard moving, and undo/redo shortcuts.
historyLimit	number	'50'	Undo depth, integer 0..500 (0 disables history).
reorderDom	boolean	true	Keep the item elements in visual reading order (row, then column) in the DOM, so focus order matches the layout. Focus is kept across reordering.
rowHeight	number	'80'	Row height in CSS px, integer 24..600.
gap	number	'16'	Gap between items in CSS px, integer 0..64.
compaction	DashboardCompaction	'vertical'	‘vertical’: items float up into free space (an item cannot rest below empty space); ‘none’: items stay where they are put.
locale	string	'en-US'	Locale of the handle names and announcements.
direction	Direction	'ltr'	rtl mirrors ArrowLeft/ArrowRight moves and pointer column mapping.

Two-way bindings

Model	Type	Change output	Description
[(items)]	readonly DashboardItem[]	(itemsChange)	Layout for the widest breakpoint: { id, x, y, w, h, minW?, minH?, maxW?, maxH?, locked?, label? } in column/row units (x, y integers >= 0; w, h integers >= 1; unique ids matching data-aui-item). Clamped to the column count. Narrower breakpoints derive from it unless layouts has one. Changing it with update() replaces every stored layout.
[(layouts)]	Readonly<Record<string, readonly DashboardItem[]>>	(layoutsChange)	Saved layouts by breakpoint name (from the layouts getter or aui-layout-change detail.layouts). Entries for unknown breakpoint names are ignored; a layout for the widest breakpoint overrides items.

Outputs

Output	Payload	Description
(layoutChanged)	DashboardGridLayoutChangeDetail	Every layout change with its reason (move, resize, add, remove, undo, redo, set).
(breakpointChange)	DashboardGridBreakpointChangeDetail	The host width crossed into another breakpoint. Dispatched on the grid host. Re-emits aui-breakpoint-change.

Methods

Call them through a viewChild query or a template reference.

Method	Description
addItem(item: Omit<DashboardItem, "x" | "y"> & Partial<Pick<DashboardItem, "x" | "y">>, element?: HTMLElement | undefined): DashboardItem | undefined	Add an item; element is the already rendered child (render it first, then add).
removeItem(id: string, removeElement?: boolean | undefined): void	Remove an item from every layout; its element is removed too unless removeElement is false.
undo(): boolean	Undo the last layout change; false when there is nothing to undo.
redo(): boolean	Redo the last undone layout change; false when there is nothing to redo.

<aui-dashboard-catalog>

Class AuiDashboardCatalog; template reference #ref="auiDashboardCatalog".

AbsoluteUI Dashboard Catalog for a Dashboard Grid in the same template: <aui-dashboard-grid #board="auiDashboardGrid" ...>...</aui-dashboard-grid> <aui-dashboard-catalog label="Widgets" [templates]="templates" [grid]="board" (catalogAdded)="add($event)"></aui-dashboard-catalog>. catalogAdded receives the cancelable DOM event: render the widget for event.detail.item, or call event.preventDefault() to veto. The catalog is created when the grid exists and re-created when it changes.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
grid	AuiDashboardGrid | null		The grid that receives the widgets: a #grid="auiDashboardGrid" reference.
label	string		Required. Accessible name of the catalog list.
templates	readonly DashboardTemplate[]		Required. Widget templates offered by the catalog.
create	(template: DashboardTemplate, item: DashboardItem) => HTMLElement | null		Render the widget element for a new item without Angular; usually leave it unset and render in catalogAdded.
locale	string	'en-US'	Messages locale (defaults to the configured locale).

Outputs

Output	Payload	Description
(catalogAdded)	CustomEvent<DashboardCatalogAddDetail>	A template was chosen (cancelable DOM event): render the widget for event.detail.item, or call preventDefault() to veto. Re-emits aui-catalog-add.