Empty State | Neural Native

Import

component.ts

import { NeuEmptyStateComponent } from '@neural-ui/native/empty-state';

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Projects

Create the first project to replace the empty state with real content. Start again restores the initial screen.

View and copy the complete example

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuBadgeComponent } from '@neural-ui/native/badge';
import { NeuEmptyStateComponent } from '@neural-ui/native/empty-state';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuCardComponent, NeuBadgeComponent, NeuEmptyStateComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">Projects</text><text class="product-caption">Make room for your next idea</text></view>
    @if (!created()) {
      <view class="product-surface"><neu-empty-state title="No projects yet" description="Create your first project to get started." actionLabel="Create project" (action)="created.set(true)" /></view>
    } @else {
      <neu-card title="Mobile launch" description="Your new workspace is ready" variant="outlined"><view class="product-section"><neu-badge label="Draft" tone="neutral" /><text>Invite your team and plan the first milestone.</text><neu-button label="Start again" size="sm" variant="text" (pressed)="created.set(false)" /></view></neu-card>
    }</view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly created = signal(false);
}

After creating a project

Create a project to reveal the next screen state, then reset it.

View and copy the complete example

after-creating-a-project.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuCardComponent } from '@neural-ui/native/card';
import { NeuEmptyStateComponent } from '@neural-ui/native/empty-state';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuCardComponent, NeuEmptyStateComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    @if (!requested()) {
    <neu-empty-state title="No projects yet" description="Create your first project to get started." actionLabel="Create project" (action)="requested.set(true)" />
    } @else { <neu-card title="New project" description="Draft workspace" variant="outlined"><text>Your new workspace is ready to configure.</text></neu-card><neu-button label="Reset example" size="sm" variant="text" (pressed)="requested.set(false)" /> }
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {
  readonly requested = signal(false);
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Empty State · android · native capture — **Android**Native screenshot

Empty State · ios · native capture — **iOS**Native screenshot

Personalization

Projected content

After the description and before the optional actionLabel button. Add an illustration or custom action; leave actionLabel empty if you provide that action yourself.

Use native elements from @ng-native/components and public Neural Native controls. Angular styles belong to the component that declares this content.

API reference

Inputs

Name	Type	Default	Binding	Description
title	string	Required	Input	Heading for the surface, section or presentation.
description	string	''	Input	Supporting text. Individual components decide where this optional description is shown.
actionLabel	string	''	Input	Text or accessible name used for main action. It does not perform the action by itself.

Models

This component declares no two-way models.

Outputs

Name	Payload	When it emits
action	void	Requests the component’s action. The payload, when present, identifies the action or item.