DashboardGrid | Neural UI v2

Usage

Give each tile a stable id and project a rendered element with matching data-tile-id. Do not use an uninstantiated ng-template as tile content. cols and rows define a tile span; columns defines the grid. Accept orderChange by replacing tiles. Pointer dragging and arrow keys propose the same new order without mutating your array.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Events: 0

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Events: 0

columns

Wide sales tile

<neu-dashboard-grid
  [tiles]="localizedTiles()"
  [columns]="2"
  (orderChange)="tiles.set($event); record('orderChange', $event)"
  ><div data-tile-id="sales">
    <strong>24.800 €</strong>
    <p>{{ t("Monthly sales", "Ventas mensuales") }}</p>
  </div>
  <div data-tile-id="orders">
    <strong>128</strong>
    <p>{{ t("Open orders", "Pedidos abiertos") }}</p>
  </div>
  <div data-tile-id="customers">
    <strong>86</strong>
    <p>{{ t("Active customers", "Clientes activos") }}</p>
  </div></neu-dashboard-grid
>

State and data for this configuration

These values match the current preview. Complete handlers, Core imports and templates are in Source.

import { signal } from '@angular/core';

export const localizedTiles = signal([
  {
    "id": "sales",
    "title": "Sales",
    "cols": undefined
  },
  {
    "id": "orders",
    "title": "Orders",
    "cols": undefined
  },
  {
    "id": "customers",
    "title": "Customers",
    "cols": undefined
  }
]);

State and events

Give each tile a stable id and project a rendered element with matching data-tile-id. Do not use an uninstantiated ng-template as tile content. cols and rows define a tile span; columns defines the grid. Accept orderChange by replacing tiles. Pointer dragging and arrow keys propose the same new order without mutating your array.

Accessibility and keyboard

Tab reaches tile handles. Arrow keys reorder the focused tile; Escape cancels an active drag.

Key	Action
`Tab`	Reach enabled tile handles and actions.
`Arrow keys`	Reorder the focused tile when keyboard reordering is enabled.
`Escape`	Cancel an active drag.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`columns`	`number`	`3`	`[columns]`	Number of columns in the dashboard grid.
`tiles`	`readonly NeuDashboardTileConfig[]`	`[]`	`[tiles]`	Tile configuration with ids matching projected data-tile-id elements and optional row/column spans.

Outputs

Listen to an event with (event)="handler($event)". The table explains the data your handler receives and how to use it.

Name	Payload	Template binding	Description
`orderChange`	`readonly NeuDashboardTileConfig[]`	`(orderChange)="onOrderChange($event)"`	Proposes the complete reordered array. Replace items or tiles to accept it.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`*` Projected content View example	Content projection Application-provided content.	`<ng-content />` Context used: `—`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Projected content

*

Events: 0

Public Types

Open a type to inspect its definition and interface fields.

NeuDashboardTileConfigTypeScript

import type { NeuDashboardTileConfig } from '@neural-ui/core/dashboard-grid';

// Public declaration (reference only)
export interface NeuDashboardTileConfig {
  cols?: number;
  id: string;
  rows?: number;
  title?: string;
}

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-focus-ring`	Normal keyboard-focus ring	Shared by other Core consumers; scope the override.	`0 0 0 var(--neu-focus-ring-width) rgba(0, 122, 255, 0.15)`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-text`	Main text and inherited icon color	Shared by other Core consumers; scope the override.	`#0f172a`
`--neu-text-muted`	Secondary labels and supporting content	Shared by other Core consumers; scope the override.	`#475569`
`--neu-radius-xl`	Corner radius	Shared by other Core consumers; scope the override.	`16px`

Related components

Use related components when your task requires a different interaction or a composed control.