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

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.