Toast | Neural Native

Importación

component.ts

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

Ejemplos

Importa ExampleComponent en su padre y coloca <app-example /> dentro del neu-theme raíz de tu aplicación. El preview aporta el marco y las zonas seguras; utiliza la estructura raíz de Instalación en tu app.

Un cambio que puedes deshacer

Edita un nombre, guárdalo localmente y deshaz el cambio real desde el toast. Al caducar el aviso, el nombre confirmado sigue visible.

Ver y copiar el ejemplo completo

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">Un cambio que puedes deshacer</text><text class="product-caption">Guarda localmente y conserva una forma clara de volver</text></view>
    <view class="product-surface"><neu-input requiredLabel="Obligatorio" label="Nombre del proyecto" [(value)]="draft" /><text class="product-caption">Proyecto guardado: {{ saved() }}</text>
    <view class="product-actions"><neu-button label="Guardar cambios" size="sm" [disabled]="!draft().trim() || draft().trim() === saved()" (pressed)="save()" /></view></view></view></scroll-view>@for (notice of [noticeId()]; track notice) { <neu-toast closeLabel="Cerrar aviso" message="Nombre del proyecto guardado localmente" [(open)]="open" [duration]="6000" actionLabel="Deshacer" (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('Lanzamiento móvil');
  readonly saved = signal('Lanzamiento móvil');
  readonly previous = signal('Lanzamiento móvil');
  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); }
}

Playground interactivo

Ajusta la configuración y prueba el resultado.

Capturas del dispositivo en inglés.

Toast · android · native capture — **Android**Captura nativa

Toast · ios · native capture — **iOS**Captura nativa

Referencia API

Inputs

Nombre	Tipo	Predeterminado	Enlace	Descripción
message	string	Obligatorio	Input	Mensaje que explica un estado, notificación o decisión.
duration	number	0	Input	Duración en milisegundos. En Toast, 0 mantiene el mensaje abierto hasta cerrarlo explícitamente.
closeLabel	string	'Dismiss'	Input	Texto o nombre accesible utilizado para cerrar. No ejecuta la acción por sí solo.
actionLabel	string	''	Input	Texto o nombre accesible utilizado para acción principal. No ejecuta la acción por sí solo.
tone	NeuTone	'neutral'	Input	Color semántico: neutral, brand, success, info, warning o danger. El valor accent se conserva como alias compatible de brand. Utiliza los tokens de NeuTheme; explica los estados con palabras además del color.

Models

Nombre	Tipo	Predeterminado	Enlace	Descripción
open	boolean	false	Model · bidireccional	Indica si se solicita mantener abierta la presentación o mensaje. Enlaza una signal escribible mediante [(open)].

Outputs

Nombre	Payload	Cuándo se emite
openChange	boolean	Emite el valor actualizado de open. [(open)] enlaza este output junto con su input model.
action	void	Solicita la acción del componente. El payload, si existe, identifica la acción o elemento.
dismissed	void	Comunica la finalización del cierre nativo.

Estado de los models

Enlaza la signal con [(nombreModel)] sin llamarla. Utiliza nombreModel() para leer su valor.

model-fields.ts

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

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

Tipos e interfaces de datos

Utiliza los imports en tu aplicación. Las definiciones siguientes se muestran como referencia.

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';