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.

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.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