Angular トースト通知サービス | ng-hub-ui-toast
Signals、ライフサイクル Observable、プログレスバー、6 つの配置位置、完全な CSS 変数によるテーマ設定を備えた standalone な Angular トースト通知サービス。
インタラクティブなサンプル
一般的な Angular のユースケースでライブラリがどのように動作するかを示すライブサンプルをご覧ください。
基本タイプ
設定オプション
配置
重複の防止
Click the button multiple times. With preventDuplicates enabled, only one toast with the same message will appear.
最大表示数と 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.
ライフサイクル Observable
Events will appear here…
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.