Accessible toast notifications for Angular 22 — familiar ngx-toastr visuals with a smaller, focused API.

npm install ngx-toaster-next

Inject ToastService, call success, error, info, or warning. No toast IDs, no custom component system, no extra ceremony.

Try the live demo — see every toast type, timeout behavior, sticky notifications, and configuration options in the browser.

Related projects

Building an Angular app with Bootstrap-style dialogs too? Check out ngx-modalieur — reactive, typed Bootstrap modals built on Angular CDK Dialog. Both libraries target Angular 22 and keep their APIs intentionally focused: use ngx-modalieur when you need a user decision or structured interaction, and ngx-toaster-next when you just need to tell the user what happened. Contributions, bug reports, and ideas are welcome in both projects.

• ngx-toaster-next
  • Table of contents
  • What is this?
  • Why use it?
  • Setup
    • 1. Install
    • 2. Add the global stylesheet
    • 3. Register app-wide defaults
  • Quick start (60 seconds)
  • Core concepts
    • Toast API
    • Timeout precedence
    • HTML precedence
  • Configuration
  • Security: enableHtml
  • Accessibility
  • Browser-only / SSR
  • Migrating from ngx-toastr
  • API reference
    • ToastService
    • Per-toast overrides
    • provideToasts
  • Building this workspace

ngx-toaster-next is a lightweight toast notification library for Angular 22, inspired by ngx-toastr.

The visual presentation follows ngx-toastr's familiar toast style, while the API intentionally stays small:

• success()
• error()
• info()
• warning()
• clearAllToasts()
• provideToasts()

It keeps the common toast-notification workflow without bringing along toast IDs, Observables, custom toast components, alternate positions, or a large configuration surface.

Familiar without the baggage. If you already know ngx-toastr, the four severity methods should feel immediately recognizable.

Accessible by default. Toasts use appropriate status / alert roles, are keyboard-focusable, and pause their countdown while hovered or focused.

Sticky errors by default. Error notifications stay visible until the user dismisses them or the application clears them.

No timer polling. Progress uses a CSS scaleX animation instead of a rapidly firing setInterval.

npm install ngx-toaster-next

The stylesheet is required — toast styles are not bundled into the Angular components.

In styles.css or styles.scss:

@import 'ngx-toaster-next/toaster.css';

Or add it through angular.json:

"styles": [
  "node_modules/ngx-toaster-next/toaster.css",
  "src/styles.scss"
]

This step is optional.

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideToasts } from 'ngx-toaster-next';

export const appConfig: ApplicationConfig = {
  providers: [
    provideToasts({
      // Override only what you need.
    })
  ]
};

ToastService works without provideToasts() — the built-in defaults are used automatically.

Call provideToasts() when you want to customize timeouts, duplicate handling, or HTML rendering.

Inject ToastService and show a toast:

import { inject } from '@angular/core';
import { ToastService } from 'ngx-toaster-next';

export class Demo {
  private readonly toasts = inject(ToastService);

  save(): void {
    this.toasts.success('Saved successfully', 'Success');
  }

  fail(): void {
    this.toasts.error('Could not save', 'Error');
  }

  note(): void {
    this.toasts.info('Heads up');
  }

  caution(): void {
    this.toasts.warning('Check your input', 'Warning');
  }
}

Errors are sticky by default (timeOut: 0), while success, info, and warning notifications dismiss automatically.

Need a one-off sticky toast?

this.toasts.success('Pinned', undefined, { timeOut: 0 });

Clear everything:

this.toasts.clearAllToasts();

All four severity methods use the same argument order:

(message, title?, override?)

For example:

this.toasts.success('Changes saved');

this.toasts.warning('Double-check these values.', 'Validation');

this.toasts.info('Deployment started.', 'Deploying', { timeOut: 5000 });

message is required. Title-only toasts are not supported.

The timeout is resolved in this order:

1. override.timeOut when it is a finite number >= 0
2. Otherwise timeOutByCategory[category]

For example:

this.toasts.success('This one stays open.', 'Pinned', { timeOut: 0 });

0 means sticky:

• no automatic dismissal
• no progress bar
• still dismissible by click
• dismissible with Enter, Space, or Escape
• removable through clearAllToasts()

HTML rendering is resolved in this order:

1. override.enableHtml when it is a boolean
2. Otherwise the app-wide enableHtml configuration

Example:

this.toasts.info('Saved <strong>successfully</strong>', 'Done', { enableHtml: true });

Only enable HTML rendering for trusted content.

Pass app-wide defaults through provideToasts():

provideToasts({
  timeOutByCategory: {
    success: 5000,
    warning: 15000
  },
  preventDuplicates: true
});

Available options:

Partial timeOutByCategory values are merged over the built-in defaults:

provideToasts({
  timeOutByCategory: {
    success: 3000
  }
});

The info, warning, and error defaults remain unchanged.

Duplicate identity is based on:

category + title + message

When enableHtml is true, the toast message is rendered as HTML.

Angular's built-in HTML sanitizer still removes unsafe constructs such as scripts, but HTML mode should nevertheless be used only with trusted content.

Do not pass untrusted user-controlled input into an HTML-enabled toast.

Titles are always rendered as plain text.

Accessibility behavior is built into the toast itself:

• success and info use role="status"
• error and warning use role="alert"
• every toast is keyboard-focusable with tabindex="0"
• Enter, Space, or Escape dismiss the focused toast
• hover pauses a timed countdown
• keyboard focus pauses a timed countdown
• leaving hover / focus starts a 1000 ms grace period before dismissal
• focus indication uses currentColor
• the role is applied to each toast root; the container is not an aria-live region

The default palette targets WCAG AA contrast:

Palette values are exposed as CSS custom properties on .toaster-container, so applications can override them when needed.

ToastService is safe to inject in applications that use server-side rendering.

Toast display operations no-op when isPlatformBrowser is false, so SSR bootstrapping does not attempt to manipulate browser UI.

The library is still intended for browser notifications — do not expect a toast to render during server-side rendering.

ngx-toaster-next deliberately keeps the familiar toast presentation while changing several implementation and API details.

The goal is not API compatibility with ngx-toastr. It is a smaller toast library with familiar presentation and modernized behavior.

success(message, title?, override?)
error(message, title?, override?)
info(message, title?, override?)
warning(message, title?, override?)
clearAllToasts()

All severity methods require a message and accept an optional title and per-toast override.

{
  timeOut?: number;
  enableHtml?: boolean;
}

Example:

this.toasts.warning('This notification stays until dismissed.', 'Attention', {
  timeOut: 0,
  enableHtml: false
});

Use provideToasts() to override application-wide defaults:

provideToasts({
  preventDuplicates: true,
  enableHtml: false,
  timeOutByCategory: {
    success: 5000,
    info: 5000,
    warning: 10000,
    error: 0
  }
});

Omitting the provider entirely is valid — ToastService falls back to the library defaults.