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.
Zuletzt aktualisiert 17.08.2026
Ü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.7.0 - 8/14/26, 12:00 AM
changed: Replaced the deprecated Angular animation trigger with a native CSS enter animation that respects reduced-motion preferences.
removed: Removed the @angular/animations peer dependency. The package is deprecated upstream and the library no longer needs it. Applications that installed it only for ng-hub-ui-toast can drop it; those using it elsewhere are unaffected.
Version 22.6.1 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.6.0 - 7/28/26, 12:00 AM
changed: Accent resolution now imports the canonical resolveHubAccent from ng-hub-ui-utils. The private copy under src/lib/shared/resolve-hub-accent.ts (used to resolve custom toast type accents) has been deleted in favour of the single, tested implementation shared family-wide. Behaviour is identical (the copy had not diverged): a bareword resolves to var(--hub-sys-color-<name>, <name>), a literal colour passes through unchanged, an empty value yields null.
added: NEW peer dependency: ng-hub-ui-utils >=22.7.0. Consumers must have ng-hub-ui-utils installed alongside this library (it is where resolveHubAccent lives). Users installing via ng add ng-hub-ui-installer get it automatically; manual installs need npm i ng-hub-ui-utils.
Version 22.5.2 - 7/28/26, 12:00 AM
fixed: Toasts are announced to screen readers: role=alert/aria-live=assertive for error and warning, role=status/polite for the rest, with aria-atomic.
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.