advanced

Empty

Empty state placeholder component.

Preview

A preview of the Empty component with interactive controls.

Preview Code

No items found You haven't added any items yet. Start by creating a new item.

Interactive

Installation

Add the Empty component to your project.

Bash

ng g @ng-cn/core:c empty

Usage

Import and use the Empty component in your Angular application.

Template TypeScript

template.html

<Empty class="py-12">
  <EmptyIcon>
    <lucide-icon name="inbox" class="h-12 w-12 text-muted-foreground" />
  </EmptyIcon>
  <EmptyTitle>No items found</EmptyTitle>
  <EmptyDescription>
    You haven't added any items yet. Start by creating a new item.
  </EmptyDescription>
</Empty>

Examples

Explore different variations and use cases for the Empty component.

Basic

Preview Code

Interactive

API Reference

Props

Prop	Type	Default	Description
`class`	`string`	—	Additional CSS classes.