ToastContainer | Neural UI v2

Uso

Coloca un ToastContainer en la raíz e inyecta NeuToastService donde necesites avisar. show devuelve un id para dismiss(id); clear elimina los mensajes y setPosition elige la esquina. duration se expresa en milisegundos; 0 conserva el aviso hasta cerrarlo. La documentación limita el servicio a cada ejemplo para no afectar al sitio.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Mensajes: 0

Consultar estado del servicio

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

Mensajes: 0

Consultar estado del servicio

Duración (ms, 0 = persistente)

<div class="remaining-actions">
  <button neu-button (neuClick)="show()">
    {{ t("Add message", "Añadir mensaje") }}</button
  ><button neu-button variant="outline" (neuClick)="service.clear()">
    {{ t("Clear all", "Limpiar todo") }}
  </button>
</div>
<neu-toast-container />

this.service.setPosition("top-right");
this.service.show({
  "tone": "success",
  "message": "Cambios guardados",
  "title": "Área de trabajo",
  "duration": 0
});

Estado y eventos

Coloca un ToastContainer en la raíz e inyecta NeuToastService donde necesites avisar. show devuelve un id para dismiss(id); clear elimina los mensajes y setPosition elige la esquina. duration se expresa en milisegundos; 0 conserva el aviso hasta cerrarlo. La documentación limita el servicio a cada ejemplo para no afectar al sitio.

Accesibilidad y teclado

Los mensajes anuncian estados o alertas según tone. Tab alcanza cerrar; el aviso no roba el foco.

Tecla	Acción
`Tab`	Accede a los botones de cerrar disponibles sin que el aviso robe el foco.
`Enter`	Cierra el aviso desde su botón enfocado de cerrar.
`Space`	Cierra el aviso desde su botón enfocado de cerrar.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Este componente no expone proyección de contenido ni templates públicos de personalización.

Configuración pública

Nombre	Contrato
`NeuToastService`	export declare class NeuToastService { clear(): void; dismiss(id: string): void; error(message: string, opts?: Partial<NeuToastOptions>): string; info(message: string, opts?: Partial<NeuToastOptions>): string; setPosition(position: NeuToastPosition): void; show(options: NeuToastOptions): string; success(message: string, opts?: Partial<NeuToastOptions>): string; warning(message: string, opts?: Partial<NeuToastOptions>): string; readonly position: import("@angular/core").WritableSignal<NeuToastPosition>; readonly toasts: import("@angular/core").WritableSignal<NeuToastItem[]>; }

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuToastItemTypeScript

import type { NeuToastOptions } from '@neural-ui/core/toast';

import type { NeuToastItem } from '@neural-ui/core/toast';

// Declaración pública (solo referencia)
export interface NeuToastItem extends Required<Omit<NeuToastOptions, 'title'>> {
  id: string;
  title: string;
}

NeuToastOptionsTypeScript

import type { NeuToastTone } from '@neural-ui/core/toast';

import type { NeuToastOptions } from '@neural-ui/core/toast';

// Declaración pública (solo referencia)
export interface NeuToastOptions {
  duration?: number;
  message: string;
  title?: string;
  tone?: NeuToastTone;
}

NeuToastPositionTypeScript

import type { NeuToastPosition } from '@neural-ui/core/toast';

// Declaración pública (solo referencia)
export type NeuToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';

NeuToastToneTypeScript

import type { NeuToastTone } from '@neural-ui/core/toast';

// Declaración pública (solo referencia)
export type NeuToastTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger';

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
Sin datos

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.