NGSTARTER UI

Tiles

The Tiles component provides a flexible responsive grid for dashboards and card-like widgets that users can rearrange. Use it as the layout host for dashboards that can change, including config-driven dashboards where the app lazy-loads widget components, shows skeletons, and saves the user-defined order.

Key Features:

Drag-and-drop: Reorder dashboard tiles with ngsTileHandle.
Responsive spans: Configure tile width and height for different breakpoints (sm, md, lg, xl).
Config-driven dashboards: Render lazy widget components and skeletons inside tiles when the dashboard can be customized.
Persistence hooks: Use orderChanged and layoutChanged to save the updated dashboard layout.

The NgStarter Angular Tiles component lets you lay out responsive dashboard tiles and support user-driven tile reordering/customization. Use ngs-tiles with ngs-tile when users can rearrange dashboard cards or widgets, customize a dashboard, or save a changed widget order. It includes examples for Basic tiles.

Basic tiles

Use Tiles when users can rearrange dashboard cards or widgets. The app owns the item data, renders each tile's content, and saves the final order from orderChanged.

:::

Item 1

4x3

:::

Item 2

4x3

:::

Item 3

8x3

:::

Item 4

4x3

:::

Item 5

12x3

:::

Item 6

4x3

:::

rick

8x5

:::

Item 8

4x3

:::

Item 9

4x3