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
The × is decorative, so this string is the whole name a screen reader announces for the toast's only control. The library ships it as the English "Close" and translates nothing: set it once for the application with provideToast({ closeButtonAriaLabel }), or per call as this demo does.
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
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.