ToastContainer | Neural UI v2

Usage

Place one ToastContainer at application root and inject NeuToastService wherever a message is needed. show returns an id for dismiss(id); clear removes all messages and setPosition chooses the corner. duration is milliseconds; 0 keeps a message until dismissal. This documentation scopes the service per example to avoid affecting the site.

Examples

Try this application-owned interaction. Its event handling and initial data are included in Code.

Messages: 0

Inspect service state

Try and configure

Change the public options, try the result and inspect the updated template. Code contains the complete executable implementation.

Messages: 0

Inspect service state

Duration (ms, 0 = persistent)

<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": "Changes saved",
  "title": "Workspace",
  "duration": 0
});

State and events

Place one ToastContainer at application root and inject NeuToastService wherever a message is needed. show returns an id for dismiss(id); clear removes all messages and setPosition chooses the corner. duration is milliseconds; 0 keeps a message until dismissal. This documentation scopes the service per example to avoid affecting the site.

Accessibility and keyboard

Messages announce status or alerts according to tone. Tab reaches the dismiss button; feedback does not steal focus.

Key	Action
`Tab`	Reach available dismiss buttons without the notification stealing focus.
`Enter`	Dismiss the notification from its focused close button.
`Space`	Dismiss the notification from its focused close button.

API

Inputs, models and Outputs are extracted from the installed Core package. Named public types link to their definitions. Templates below include executable examples.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

This component does not expose content projection or public customization templates.

Public configuration

Name	Contract
`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

Open a type to inspect its definition and interface fields.

NeuToastItemTypeScript

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

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

// Public declaration (reference only)
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';

// Public declaration (reference only)
export interface NeuToastOptions {
  duration?: number;
  message: string;
  title?: string;
  tone?: NeuToastTone;
}

NeuToastPositionTypeScript

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

// Public declaration (reference only)
export type NeuToastPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';

NeuToastToneTypeScript

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

// Public declaration (reference only)
export type NeuToastTone = 'neutral' | 'success' | 'info' | 'warning' | 'danger';

Styles and tokens

Use the supported public tokens listed below. Surrounding layout belongs to your application; validate the result in light and dark modes and narrow containers.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
No data

Related components

Use related components when your task requires a different interaction or a composed control.