Angular トースト通知サービス | ng-hub-ui-toast
Signals、ライフサイクル Observable、プログレスバー、6 つの配置位置、完全な CSS 変数によるテーマ設定を備えた standalone な Angular トースト通知サービス。
概要
チームがこのライブラリを探す理由
Angular の standalone アーキテクチャと共存し、Observable ベースのライフサイクルフックをすぐに使える、設定不要の命令的な通知レイヤーが必要なときは ng-hub-ui-toast を使いましょう。
インストール
npm install ng-hub-ui-toastジャンプ
最適な用途
- フォーム送信のフィードバック
- バックグラウンド同期の通知
- エラーアラート
- セッション期限切れの警告
について toast
ng-hub-ui-toast は、Angular 22+ の standalone アプリ向けのシグナル駆動トーストサービスです。任意のコンポーネントやサービスから success()、error()、warning()、info() を呼び出すと、通知が最初に発火したタイミングでオーバーレイコンテナが遅延マウントされます。各呼び出しは、onShown、onHidden、onTap の Observable と manualClose() / resetTimeout() メソッドを備えた HubToastRef を返します。provideToast() でデフォルト値をグローバルに設定し、任意のオプションを呼び出しごとに上書きできます。
機能ガイド
基本的なトーストタイプ
4 つのセマンティックタイプ — success、error、warning、info — があり、それぞれ対応するデザインシステムのカラートークンにマッピングされています。
サンプル:
基本タイプ
基本タイプ
設定オプション
autoDismiss のタイムアウト、プログレスバー、閉じるボタン、tap-to-dismiss の動作を、呼び出しごとに、または provideToast() でグローバルに制御します。
サンプル:
設定オプション
設定オプション
配置
画面上の 6 つの固定位置: top/bottom を right、left、center と組み合わせます。
サンプル:
配置
配置
重複排除
preventDuplicates は、すでに表示中のメッセージおよびタイプと一致する新しい通知を、何も表示せずに破棄します。
サンプル:
重複の防止
重複の防止
Click the button multiple times. With preventDuplicates enabled, only one toast with the same message will appear.
容量の制御
maxOpened は表示中のスタックの上限を設定します。autoDismiss は、上限に達したときに最も古いものを削除するか、新しいものを何も表示せずに破棄するかを決定します。
サンプル:
最大表示数と autoDismiss
最大表示数と 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
すべての HubToastRef は、onShown、onHidden、onTap の Observable に加え、命令的な制御のための manualClose() と resetTimeout() を公開します。
サンプル:
ライフサイクル Observable
ライフサイクル Observable
CSS 変数によるテーマ設定
背景、角丸、シャドウ、パディング、プログレスバーなど、あらゆる視覚的な詳細は --hub-toast-* カスタムプロパティであり、任意の祖先要素やスタイルシートから上書きできます。
サンプル:
CSS 変数によるテーマ設定
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.
主な機能
最近の変更
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.