Toast | Neural Native

Import

component.ts

import { NeuToastComponent } from '@neural-ui/native/toast';

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.

A change you can take back

Edit a project name, save it locally and undo the actual change from the toast. When the notice expires, the confirmed local name stays visible.

View and copy the complete example

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuInputComponent } from '@neural-ui/native/input';
import { NeuToastComponent } from '@neural-ui/native/toast';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuInputComponent, NeuToastComponent, View, Text, ScrollView],
  template: `
    <view class="toast-demo"><scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">A change you can take back</text><text class="product-caption">Save locally and keep a clear way back</text></view>
    <view class="product-surface"><neu-input label="Project name" [(value)]="draft" /><text class="product-caption">Saved project: {{ saved() }}</text>
    <view class="product-actions"><neu-button label="Save changes" size="sm" [disabled]="!draft().trim() || draft().trim() === saved()" (pressed)="save()" /></view></view></view></scroll-view>@for (notice of [noticeId()]; track notice) { <neu-toast message="Project name saved locally" [(open)]="open" [duration]="6000" actionLabel="Undo" (action)="undo()" /> }</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); }

.toast-demo { flex: 1; min-height: 0; }
  `,
})
export class ExampleComponent {
  readonly draft = signal('Mobile launch');
  readonly saved = signal('Mobile launch');
  readonly previous = signal('Mobile launch');
  readonly open = signal(false);
  readonly noticeId = signal(0);
  save() { this.previous.set(this.saved()); this.saved.set(this.draft().trim()); this.noticeId.update(id => id + 1); this.open.set(true); }
  undo() { this.saved.set(this.previous()); this.draft.set(this.previous()); this.open.set(false); }
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Toast · android · native capture — **Android**Native screenshot

Toast · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
message	string	Required	Input	Message shown to explain a status, notification or decision.
duration	number	0	Input	Duration in milliseconds. For Toast, 0 keeps the message open until explicitly dismissed.
closeLabel	string	'Dismiss'	Input	Text or accessible name used for close. It does not perform the action by itself.
actionLabel	string	''	Input	Text or accessible name used for main action. It does not perform the action by itself.
tone	NeuTone	'neutral'	Input	Semantic color: neutral, brand, success, info, warning or danger. The accent value remains a compatible alias for brand. Colors use NeuTheme tokens; explain statuses with words as well as color.

Models

Name	Type	Default	Binding	Description
open	boolean	false	Model · two-way	Whether the presentation or message is requested to be open. Bind a writable signal with [(open)].

Outputs

Name	Payload	When it emits
openChange	boolean	Emits the updated open value. [(open)] binds this output together with its model input.
action	void	Requests the component’s action. The payload, when present, identifies the action or item.
dismissed	void	Reports completion of native dismissal.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

import { signal } from '@angular/core';

// Fields inside your component class
readonly open = signal<boolean>(false);

Types and data interfaces

Use the imports in your application. The definitions below are provided for reference.

NeuTone

NeuTone.ts

import type { NeuTone } from '@neural-ui/native/foundation';

// Public definition for reference only. Import this type; do not redeclare it.
export type NeuTone = 'neutral' | 'brand' | 'accent' | 'success' | 'info' | 'warning' | 'danger';