Service de Notifications Toast Angular | ng-hub-ui-toast

Service de notifications toast Angular standalone avec Signals, observables de cycle de vie, barre de progression, six positions et thématisation complète par variables CSS.

Exemples interactifs

Explorez des exemples en direct qui montrent comment la bibliothèque se comporte dans les cas d’usage Angular courants.

Types de base

Options de configuration

Positionnement

Empêcher les doublons

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

Max Opened et 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.

Observables de cycle de vie

Events will appear here…

Thématisation par variables CSS

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.