Dashboard Widget for Angular

import { AuiDashboardWidget } from '@absoluteui/angular/dashboard-widget';

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

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

Example

import { Component } from '@angular/core';
import { AuiDashboardWidget } from '@absoluteui/angular/dashboard-widget';

@Component({
  selector: 'app-sales-widget',
  imports: [AuiDashboardWidget],
  template: `
    <aui-dashboard-widget [title]="'Sales'" subtitle="Last 30 days" [removable]="true" (removed)="removed = true">
      <p>$48,200</p>
    </aui-dashboard-widget>`,
})
export class SalesWidgetComponent {
  removed = false;
}

`<aui-dashboard-widget>`

Class AuiDashboardWidget; template reference #ref="auiDashboardWidget".

AbsoluteUI Dashboard Widget; the projected content is the body: <aui-dashboard-widget title="Revenue" [removable]="true" (removed)="remove(id)">...</aui-dashboard-widget>. The header is inserted before the Angular-managed body. [(collapsed)] is two-way.

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

Inputs

Input	Type	Default	Description
`title`	`string`		Required. Heading text; names the region and the action buttons. Non-empty.
`headingLevel`	`2 \| 3 \| 4 \| 5 \| 6`	`'3'`	Heading element level; changing it with update() throws.
`subtitle`	`string`		Supporting text under the heading (hidden when empty).
`actions`	`readonly DashboardWidgetAction[]`		Extra header icon buttons { id, label, icon } (unique ids, non-empty labels); activation emits aui-action.
`removable`	`boolean`	`false`	Show a remove button that emits the cancelable aui-remove.
`busy`	`boolean`	`false`	Set aria-busy=true on the host while content loads.
`collapsible`	`boolean`	`true`	Show the collapse/expand button.
`maximizable`	`boolean`	`true`	Show the maximize/restore button.
`locale`	`string`	`'en-US'`	Locale of the action button names.
`direction`	`Direction`	`'ltr'`	Resolved with the other options; the layout itself follows the document direction (logical CSS).

Two-way bindings

Model	Type	Change output	Description
`[(collapsed)]`	`boolean`	`(collapsedChange)`	Initial and controlled collapsed state (update() sets it without an event).

Outputs

Output	Payload	Description
`(toggled)`	`DashboardWidgetToggleDetail`	The user activated the collapse/expand button. Re-emits `aui-toggle`.
`(maximized)`	`DashboardWidgetMaximizeDetail`	The widget was maximized or restored (button, Escape, or setMaximized). Re-emits `aui-maximize`.
`(action)`	`DashboardWidgetActionDetail`	The user activated a custom header action. Re-emits `aui-action`.
`(removed)`	`DashboardWidgetRemoveDetail`	The user activated the remove button; id is the host’s data-aui-item (its Dashboard Grid item) or null. The widget takes no default action: remove the element or call grid.removeItem(id). Re-emits `aui-remove`.

Methods

Call them through a viewChild query or a template reference.

Method	Description
`setMaximized(maximized: boolean): void`	Maximize the widget into a modal view, or restore it (emits `maximized`).