Angular Toast Notification Service | ng-hub-ui-toast

Standalone Angular toast notification service with Signals, lifecycle observables, progress bar, six positions and full CSS variable theming.

Last updated Aug 17, 2026

Overview

Why teams search for this library

Use ng-hub-ui-toast when you need a zero-config imperative notification layer that coexists with Angular's standalone architecture and gives you Observable-based lifecycle hooks out of the box.

Install

npm install ng-hub-ui-toast

Jump to

Ideal for

  • form submission feedback
  • background sync notifications
  • error alerts
  • session expiry warnings

About toast

ng-hub-ui-toast is a signal-driven toast service for Angular 22+ standalone apps. Call success(), error(), warning() or info() from any component or service; the overlay container is lazily mounted the first time a notification fires. Each call returns a HubToastRef with onShown, onHidden and onTap observables and manualClose() / resetTimeout() methods. Configure defaults globally with provideToast() and override any option per-call.

Feature guides

Basic Toast Types

Four semantic types — success, error, warning and info — each mapped to the matching design-system colour token.

Examples:
Basic Types

Basic Types

Configuration Options

Control auto-dismiss timeout, progress bar, close button and tap-to-dismiss behaviour per call or globally via provideToast().

Examples:
Configuration Options

Configuration Options

Positioning

Six fixed positions on screen: top/bottom combined with right, left or center.

Examples:
Positioning

Positioning

Deduplication

preventDuplicates silently drops new notifications that match an already-visible message and type.

Examples:
Prevent Duplicates

Prevent Duplicates

Click the button multiple times. With preventDuplicates enabled, only one toast with the same message will appear.

Capacity Control

maxOpened caps the visible stack; autoDismiss decides whether the oldest is removed or new ones are silently dropped when the cap is reached.

Examples:
Max Opened & autoDismiss

Max Opened & autoDismiss

When autoDismiss is false, new toasts are silently dropped once the cap is reached. When true, the oldest toast is removed to make room.

Lifecycle Observables

Every HubToastRef exposes onShown, onHidden and onTap observables plus manualClose() and resetTimeout() for imperative control.

Examples:
Lifecycle Observables

Lifecycle Observables

Events will appear here…

CSS Variable Theming

Every visual detail — background, radius, shadow, padding, progress bar — is a --hub-toast-* custom property that can be overridden from any ancestor element or stylesheet.

Examples:
CSS Variable Theming

CSS Variable Theming

Active token overrides (applied to this demo's container):

--hub-toast-border-radius: 0.75rem;
--hub-toast-shadow: 0 4px 20px rgba(0,0,0,.18);
--hub-toast-padding-x: 1.25rem;
--hub-toast-padding-y: 1rem;
--hub-toast-font-size: 0.9rem;

Tokens are injected from the page's stylesheet or from a style binding on any ancestor element — the container reads them via CSS inheritance.

Key features

Recent changes

Version 22.7.0 - 8/14/26, 12:00 AM

changed: Replaced the deprecated Angular animation trigger with a native CSS enter animation that respects reduced-motion preferences.

removed: Removed the @angular/animations peer dependency. The package is deprecated upstream and the library no longer needs it. Applications that installed it only for ng-hub-ui-toast can drop it; those using it elsewhere are unaffected.

Version 22.6.1 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.6.0 - 7/28/26, 12:00 AM

changed: Accent resolution now imports the canonical resolveHubAccent from ng-hub-ui-utils. The private copy under src/lib/shared/resolve-hub-accent.ts (used to resolve custom toast type accents) has been deleted in favour of the single, tested implementation shared family-wide. Behaviour is identical (the copy had not diverged): a bareword resolves to var(--hub-sys-color-<name>, <name>), a literal colour passes through unchanged, an empty value yields null.

added: NEW peer dependency: ng-hub-ui-utils >=22.7.0. Consumers must have ng-hub-ui-utils installed alongside this library (it is where resolveHubAccent lives). Users installing via ng add ng-hub-ui-installer get it automatically; manual installs need npm i ng-hub-ui-utils.

Version 22.5.2 - 7/28/26, 12:00 AM

fixed: Toasts are announced to screen readers: role=alert/aria-live=assertive for error and warning, role=status/polite for the rest, with aria-atomic.

Version 22.1.0 - 6/19/26, 12:00 AM

changed: Lowered the Angular peer dependency floor to `>=21.0.0`; the library now installs and runs in Angular 21 applications. No source or API changes.

Version 22.0.0 - 6/17/26, 12:00 AM

added: Initial release: `ToastService` with `success()`, `error()`, `warning()`, `info()`, `show()`, `remove()`, `clear()`.

added: `HubToastRef` with `onShown`, `onHidden`, `onTap` observables and `manualClose()` / `resetTimeout()`.

added: `ToastComponent` with signal-based auto-dismiss timer, progress bar and close button.

added: `ToastContainerComponent` with six position classes.

added: Accent system: `@each` loop for built-in types; `color-mix` open default for custom types.

added: `provideToast()` standalone provider function.

added: Angular animations: slide-in from edge on enter, fade-out on dismiss.

Related libraries

ng-hub-ui-modal ng-hub-ui-portal ng-hub-ui-utils