Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

Grundlegende Typen

Konfigurationsoptionen

Progress bar

Close button

Tap to dismiss

Positionierung

Position

Duplikate verhindern

preventDuplicates: true

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

Max Opened & autoDismiss

maxOpened

autoDismiss (remove oldest)

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

Events will appear here…

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.