Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

Grid

Grid is a static 12-column dashboard and widget renderer for layouts defined by the application. It receives configs that map widget types to components, and items that define each widget id, type, column span, height, content, skeleton, and nested children.

Use it when the dashboard structure is predefined and users do not need to change tile order or customize the dashboard. If users can rearrange or change the dashboard, use Tiles as the dashboard layout host instead. Do not use it as a normal CSS layout helper for forms, pages, cards, or repeated elements; use Tailwind grid/flex classes for that.

The NgStarter Angular Grid component lets you render static dashboard widgets in a predefined 12-column layout. Use ngs-grid when the application defines a static dashboard or widget layout and users do not need to rearrange, customize, or save the dashboard order.

Use Grid for static dashboard layouts where the app defines which widget components appear and where they are placed. Each item can choose a widget type, column span, height, content payload, and nested children.

Example GridItemAware

example-widget works!

Example GridItemAware 2

example-widget works!

Example GridItemAware 3

example-widget works!

Example GridItemAware 6

example-widget works!

Example GridItemAware 5

example-widget works!

Example GridItemAware 6

example-widget works!

Example GridItemAware 6

example-widget works!

Example GridItemAware 6

example-widget works!

Example GridItemAware 2

example-widget works!

Example GridItemAware 3

example-widget works!