Servicio de Notificaciones Toast para Angular | ng-hub-ui-toast

Servicio de notificaciones toast standalone para Angular con Signals, observables de ciclo de vida, barra de progreso, seis posiciones y tematización con variables CSS.

Última actualización 17 ago 2026

Visión General

Por qué los equipos buscan esta librería

Usa ng-hub-ui-toast cuando necesites una capa de notificaciones imperativa sin configuración que conviva con la arquitectura standalone de Angular y te ofrezca hooks de ciclo de vida basados en Observables.

Instalación

npm install ng-hub-ui-toast

Ir a

Ideal para

  • feedback de envío de formularios
  • notificaciones de sincronización en segundo plano
  • alertas de error
  • advertencias de expiración de sesión

Sobre toast

ng-hub-ui-toast es un servicio toast impulsado por signals para apps Angular 22+ standalone. Llama a success(), error(), warning() o info() desde cualquier componente o servicio; el contenedor overlay se monta de forma diferida la primera vez que se dispara una notificación. Cada llamada devuelve un HubToastRef con los observables onShown, onHidden y onTap y los métodos manualClose() / resetTimeout().

Guías de uso

Tipos de toast

Cuatro tipos semánticos — success, error, warning e info — cada uno mapeado al token de color del sistema de diseño correspondiente.

Ejemplos:
Tipos básicos

Tipos básicos

Opciones de configuración

Controla el timeout de autodismiss, barra de progreso, botón de cierre y tap-to-dismiss por llamada o globalmente con provideToast().

Ejemplos:
Opciones de configuración

Opciones de configuración

Posicionamiento

Seis posiciones fijas en pantalla: top/bottom combinado con right, left o center.

Ejemplos:
Posicionamiento

Posicionamiento

Deduplicación

preventDuplicates descarta silenciosamente nuevas notificaciones que coincidan con un mensaje y tipo ya visible.

Ejemplos:
Prevenir duplicados

Prevenir duplicados

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

Control de capacidad

maxOpened limita la pila visible; autoDismiss decide si se elimina el más antiguo o se descartan los nuevos al alcanzar el límite.

Ejemplos:
Máximo abiertos y autoDismiss

Máximo abiertos y 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.

Observables de ciclo de vida

Cada HubToastRef expone los observables onShown, onHidden y onTap, más manualClose() y resetTimeout() para control imperativo.

Ejemplos:
Observables de ciclo de vida

Observables de ciclo de vida

Events will appear here…

Tematización con variables CSS

Cada detalle visual — fondo, radio, sombra, relleno, barra de progreso — es una propiedad personalizada --hub-toast-* que puede sobreescribirse desde cualquier elemento padre o hoja de estilos.

Ejemplos:
Tematización con variables CSS

Tematización con variables 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.

Características clave

Cambios recientes

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.

Librerías relacionadas

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