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

Empty state

Empty State explains why an area has no content and, when useful, gives the user a next step. Compose it with ngs-empty-state, ngs-empty-state-title, ngs-empty-state-content, and optional ngs-empty-state-icon, ngs-empty-state-image, or ngs-empty-state-actions.

Use it for empty tables, lists, folders, dashboard sections, first-run screens, no search results, no filtered data, and places like “no projects yet” or “no messages yet”. Do not use it for loading, critical errors, decorative placeholders, hero blocks, or marketing sections.

Key features:
  • Structured title, content, icon, image, and actions.
  • Useful for first-run, no-data, and no-results states.
  • Can include actions such as Create, Clear filters, Invite, or Upload.
  • Works inside Data View empty templates when a dataset needs a custom empty state.

The NgStarter Angular Empty State component lets you explain why an expected content area is empty and optionally offer a next action. Use for empty tables, lists, folders, dashboard sections, first-run screens, no search results, no filtered data, no projects yet, no messages yet, and similar no-content states. It includes examples for Basic empty state, Empty state with image, Empty state with icon, and Empty state with custom icon.

Basic empty state

Use Empty State when content is expected but absent. The message should explain the empty area and help the user understand what can happen next.

Something has been achieved You can do something with it, or you can not do it. And the description text can be quite long.

Empty state with image

No results for the term "NgStarter" in the our library. You can try another search term similar to this one.

Empty state with icon

No results for the term "NgStarter" in the our library. You can try another search term similar to this one.

Empty state with custom icon

No results for the term "Info" on the our planet.

Empty state with actions

Add actions only when there is a useful next step, such as creating the first item, clearing filters, inviting users, or uploading content.

Something has been achieved You can do something with it, or you can not do it. And the description text can be quite long.