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.

Interactive examples

Explore live examples that show how the library behaves in common Angular use cases.

Basic Types

Configuration Options

Positioning

Prevent Duplicates

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

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

Events will appear here…

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.