GET STARTED

Import and providers

Register the Message API once, then place a Toast outlet where that channel should render.

import { provideNeuralMessages } from '@neural-ng/core/message';
import { provideNeuralToast, NeuralToast } from '@neural-ng/core/toast';

export const appConfig: ApplicationConfig = {
  providers: [provideNeuralMessages(), provideNeuralToast()],
};

@Component({ imports: [NeuralToast] })

Basic notification

The service owns messages; the outlet owns presentation, placement, timers and dismissal.

Complete severity surfaces

Severity colors the background, border, content, icon, close control and progress treatment—not only one edge.

Logical positions

Start and end follow document direction. Middle positions use the same accessible outlet and cleanup behavior.

Lifetime, progress and pause

Finite messages share one timer with the progress bar. Hover and focus pause both. Use duration: null for persistent work.

Show progress

Enable showProgress to expose the remaining lifetime visually. The indicator pauses and resumes with the message timer.

Icons

Automatic Neural Icons follow severity. Disable them with icon=false or replace all with iconClass.

Independent channels

Route notifications to independent outlets such as global, billing or uploads without coupling feature code to presentation.

Unstyled and class ownership

Unstyled mode retains channels, timers, live regions, swipe and structural hooks while every visual class moves to the consumer.

Toast inputs

Message API

notify() returns a reference with id, closed and closeReason Signals plus dismiss(). The service also exposes dismiss(id) and clear(channel?). Message payloads accept severity, title, message, channel, duration, dismissible and data.

Position union

Toast tokens