Сервис Toast-уведомлений для Angular | ng-hub-ui-toast

Standalone-сервис toast-уведомлений для Angular с Signals, observable жизненного цикла, индикатором прогресса, шестью позициями и полной темизацией через CSS-переменные.

Обзор

Почему команды ищут эту библиотеку

Используйте ng-hub-ui-toast, когда нужен императивный слой уведомлений без конфигурации, который сосуществует со standalone-архитектурой Angular и из коробки предоставляет хуки жизненного цикла на основе Observable.

Установка

npm install ng-hub-ui-toast

Перейти к

Идеально для

  • обратная связь при отправке формы
  • уведомления о фоновой синхронизации
  • оповещения об ошибках
  • предупреждения об истечении сессии

О библиотеке toast

ng-hub-ui-toast — это сервис toast, управляемый сигналами, для standalone-приложений Angular 22+. Вызывайте success(), error(), warning() или info() из любого компонента или сервиса; контейнер-наложение монтируется лениво при первом срабатывании уведомления. Каждый вызов возвращает HubToastRef с observable onShown, onHidden и onTap и методами manualClose() / resetTimeout(). Настраивайте значения по умолчанию глобально через provideToast() и переопределяйте любую опцию для каждого вызова.

Руководства по возможностям

Базовые типы toast

Четыре семантических типа — success, error, warning и info — каждый сопоставлен с соответствующим цветовым токеном дизайн-системы.

Примеры:
Базовые типы

Базовые типы

Опции конфигурации

Управляйте таймаутом autoDismiss, индикатором прогресса, кнопкой закрытия и поведением tap-to-dismiss для каждого вызова или глобально через provideToast().

Примеры:
Опции конфигурации

Опции конфигурации

Позиционирование

Шесть фиксированных позиций на экране: 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 решает, удаляется ли самый старый toast или новые молча отбрасываются при достижении лимита.

Примеры:
Максимум открытых и 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 предоставляет observable onShown, onHidden и onTap, а также методы manualClose() и resetTimeout() для императивного управления.

Примеры:
Observable жизненного цикла

Observable жизненного цикла

Events will appear here…

Темизация через 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.

Связанные библиотеки

ng-hub-ui-modal ng-hub-ui-portal ng-hub-ui-utils