Getting Started
Overview
Installation
Theme
Colors
Customize Theme
Playground
Theme Generator
Typography
Forms
Basic Inputs
Button Toggle
Buttons
Checkbox
Input
Radio
Segmented
Slide Toggle
Select
Autocomplete
Country Select
Currency Select
Date Format Select
Select
Timezone
Custom Inputs
Form Renderer
Inline Text Edit
Input Mask
Number Input
Password Strength
Phone Input
Pin Input
Components
Navigation
Breadcrumbs
Navigation
Rail Navigation
Side Panel
Sidebar
Tab Panel
Components
69
Action Required
Alert
Announcement
Avatar
Badge
Block Loader
Bottom Sheet
Calendar
Card
Card Overlay
Carousel
Chips
Code Highlighter
Color Picker
Color Switcher
Command Bar
Comment Editor
Comparison Slider
Confirm
Content Fade
Cookie Popup
Crop
Datepicker
Dialog
Divider
Drawer
Emoji Picker
Empty State
Expand
Expansion Panel
Filter Builder
Gauge
Grid
Guided Tour
Icon
Image Placeholder
Image Resizer
Image Viewer
Image Zoom Viewer
Incidents
Keyboard
Layout
List
Marquee
Menu
Notifications
Paginator
Panel
Popover
Progress Bar
Progress Spinner
Resizable Container
Screen Loader
Sidenav
Signature Pad
Skeleton
Slider
Snackbar
Split Pane
Stepper
Suggestions
Table
Tabs
Text Editor
Thumbnail Maker
Tiles
Timeline
Timepicker
Toolbar
Tooltip
Tree
Upload
Video Viewer
Micro Charts
Bar Chart
Line Chart
Pie Chart
Libraries
Kanban Board
Basic Example
Overview
Image Designer
Basic Example
Overview
Video Player
Basic Example
Carousel Example
Minimal Example
Overview
Visual Builder
Basic Example
Overview
Content Editor
Content Builder
Overview
Data View
Basic
Column pinning
Column settings
Custom cell renderers
Custom empty state
Embedded
Filter data
Loading state
Overview
Pinning and pagination
Refresh
Resizable columns
Server side
Server side (empty state)
Sticky columns
With action bar
With pagination
With selection
With sorting
HomePricingTemplatesLicense
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Purchase

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.

Tiles

Selector: ngs-tiles

Exported as: ngsTiles

PropTypeDefault
items
The data array used to render tiles. Required for reordering logic to work correctly.
any[][]
columns
Total number of columns in the grid.
number12
gap
Gap between tiles.
number | string24
EventDescription
orderChangeEmitted when the visual order of tiles changes during dragging.
orderChangedEmitted when the dragging finishes and the new order is finalized.
layoutChangedEmitted when the layout is recalculated.

Tile

Selector: ngs-tile

Exported as: ngsTile

PropTypeDefault
width*
Number of columns the tile should span.
number-
height*
Number of rows the tile should span.
number-
width.sm
Column span for sm breakpoint.
numberundefined
width.md
Column span for md breakpoint.
numberundefined
width.lg
Column span for lg breakpoint.
numberundefined
width.xl
Column span for xl breakpoint.
numberundefined
height.sm
Row span for sm breakpoint.
numberundefined
height.md
Row span for md breakpoint.
numberundefined
height.lg
Row span for lg breakpoint.
numberundefined
height.xl
Row span for xl breakpoint.
numberundefined

Using this component in production?

NgStarter includes source code, admin dashboard templates, and commercial support.

View pricing →Explore admin templates

Related components

Thumbnail MakerMore docs in Components.TimelineMore docs in Components.Text EditorMore docs in Components.