Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Visual Builder
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

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!