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.

Vue d’ensemble

Pourquoi les équipes recherchent cette bibliothèque

Utilisez ng-hub-ui-toast lorsque vous avez besoin d'une couche de notifications impérative sans configuration qui coexiste avec l'architecture standalone d'Angular et vous offre par défaut des hooks de cycle de vie basés sur des Observables.

Installation

npm install ng-hub-ui-toast

Aller à

Idéal pour

  • retour sur la soumission de formulaires
  • notifications de synchronisation en arrière-plan
  • alertes d'erreur
  • avertissements d'expiration de session

À propos de toast

ng-hub-ui-toast est un service toast piloté par signals pour les applications standalone Angular 22+. Appelez success(), error(), warning() ou info() depuis n'importe quel composant ou service ; le conteneur d'overlay est monté de façon différée la première fois qu'une notification est déclenchée. Chaque appel renvoie un HubToastRef avec les observables onShown, onHidden et onTap ainsi que les méthodes manualClose() / resetTimeout(). Configurez les valeurs par défaut globalement avec provideToast() et surchargez n'importe quelle option par appel.

Guides de fonctionnalités

Types de toast de base

Quatre types sémantiques — success, error, warning et info — chacun associé au token de couleur correspondant du système de design.

Exemples:
Types de base

Types de base

Options de configuration

Contrôlez le délai d'autoDismiss, la barre de progression, le bouton de fermeture et le comportement tap-to-dismiss par appel ou globalement via provideToast().

Exemples:
Options de configuration

Options de configuration

Positionnement

Six positions fixes à l'écran : top/bottom combiné avec right, left ou center.

Exemples:
Positionnement

Positionnement

Déduplication

preventDuplicates écarte silencieusement les nouvelles notifications qui correspondent à un message et un type déjà visibles.

Exemples:
Empêcher les doublons

Empêcher les doublons

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

Contrôle de la capacité

maxOpened limite la pile visible ; autoDismiss détermine si le plus ancien est retiré ou si les nouveaux sont écartés silencieusement lorsque la limite est atteinte.

Exemples:
Max Opened et autoDismiss

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

Chaque HubToastRef expose les observables onShown, onHidden et onTap ainsi que manualClose() et resetTimeout() pour un contrôle impératif.

Exemples:
Observables de cycle de vie

Observables de cycle de vie

Events will appear here…

Thématisation par variables CSS

Chaque détail visuel — arrière-plan, rayon, ombre, rembourrage, barre de progression — est une propriété personnalisée --hub-toast-* qui peut être surchargée depuis n'importe quel élément ancêtre ou feuille de style.

Exemples:
Thématisation par variables CSS

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.

Fonctionnalités clés

Changements récents

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.

Bibliothèques associées

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