Angular Toast-Benachrichtigungsservice | ng-hub-ui-toast
Standalone Angular Toast-Benachrichtigungsservice mit Signals, Lifecycle-Observables, Fortschrittsleiste, sechs Positionen und vollständigem Theming über CSS-Variablen.
Übersicht
Warum Teams nach dieser Bibliothek suchen
Nutze ng-hub-ui-toast, wenn du eine imperative Benachrichtigungsebene ohne Konfiguration brauchst, die mit der standalone Architektur von Angular zusammenarbeitet und dir von Haus aus Observable-basierte Lifecycle-Hooks bietet.
Installieren
npm install ng-hub-ui-toastSpringen zu
Ideal für
- Feedback zum Absenden von Formularen
- Benachrichtigungen zur Hintergrundsynchronisierung
- Fehlerwarnungen
- Warnungen zum Ablauf der Sitzung
Über toast
ng-hub-ui-toast ist ein signal-gesteuerter Toast-Service für standalone Apps mit Angular 22+. Rufe success(), error(), warning() oder info() aus jeder Komponente oder jedem Service auf; der Overlay-Container wird beim ersten Auslösen einer Benachrichtigung verzögert eingebunden. Jeder Aufruf gibt eine HubToastRef mit den Observables onShown, onHidden und onTap sowie den Methoden manualClose() / resetTimeout() zurück. Konfiguriere Standardwerte global mit provideToast() und überschreibe jede Option pro Aufruf.
Funktionsleitfäden
Grundlegende Toast-Typen
Vier semantische Typen — success, error, warning und info — jeder dem passenden Farb-Token des Design-Systems zugeordnet.
Beispiele:
Grundlegende Typen
Grundlegende Typen
Konfigurationsoptionen
Steuere das Auto-Dismiss-Timeout, die Fortschrittsleiste, die Schließen-Schaltfläche und das Tap-to-Dismiss-Verhalten pro Aufruf oder global über provideToast().
Beispiele:
Konfigurationsoptionen
Konfigurationsoptionen
Positionierung
Sechs feste Positionen auf dem Bildschirm: top/bottom kombiniert mit right, left oder center.
Beispiele:
Positionierung
Positionierung
Deduplizierung
preventDuplicates verwirft stillschweigend neue Benachrichtigungen, die einer bereits sichtbaren Nachricht und einem bereits sichtbaren Typ entsprechen.
Beispiele:
Duplikate verhindern
Duplikate verhindern
Click the button multiple times. With preventDuplicates enabled, only one toast with the same message will appear.
Kapazitätssteuerung
maxOpened begrenzt den sichtbaren Stack; autoDismiss entscheidet, ob der älteste entfernt wird oder neue stillschweigend verworfen werden, wenn das Limit erreicht ist.
Beispiele:
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
Jede HubToastRef stellt die Observables onShown, onHidden und onTap sowie manualClose() und resetTimeout() für die imperative Steuerung bereit.
Beispiele:
Lifecycle-Observables
Lifecycle-Observables
Theming mit CSS-Variablen
Jedes visuelle Detail — Hintergrund, Radius, Schatten, Padding, Fortschrittsleiste — ist eine --hub-toast-* Custom Property, die von jedem übergeordneten Element oder Stylesheet überschrieben werden kann.
Beispiele:
Theming mit CSS-Variablen
Theming mit CSS-Variablen
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.
Hauptfunktionen
Letzte Änderungen
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.