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.
Referencia API
Aquí tienes el contrato completo de toast: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.
Inputs
Ajusta toast a tu gusto con 10 inputs. Se enlazan como cualquier @Input de Angular.
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
data (hub-toast)Obligatorio | HubToastData | — | El toast a renderizar: id, tipo, mensaje, título opcional, configuración resuelta y subjects de ciclo de vida. Lo proporciona internamente ToastContainerComponent — normalmente nunca lo enlazas tú. |
timeOut / extendedTimeOut (config) | number | 5000 / 2500 | timeOut es la duración en ms antes del descarte automático (0 = persistente); extendedTimeOut es el tiempo extra concedido después de que el usuario deje de pasar el cursor sobre el toast. |
closeButton / progressBar (config) | boolean | true / false | closeButton muestra un botón de descarte en el toast; progressBar muestra una barra con la cuenta atrás hasta el descarte automático. |
tapToDismiss (config) | boolean | true | Cierra el toast cuando el usuario hace clic en cualquier parte de él. |
disableTimeOut (config) | boolean | 'timeOut' | 'extendedTimeOut' | false | Desactiva el descarte automático: true o 'timeOut' desactivan el temporizador inicial; 'extendedTimeOut' desactiva solo la extensión por hover. |
newestOnTop (config) | boolean | true | Cuando es true, el toast más reciente se inserta en la parte superior de la pila en lugar de en la inferior. |
positionClass (config) | HubToastPosition | string | 'toast-top-right' | Posición en pantalla del contenedor de toasts: una de las seis clases integradas toast-top/bottom-left/center/right, o una cadena de clase personalizada. |
maxOpened (config) | number | 0 | Número máximo de toasts visibles simultáneamente; 0 significa sin límite. |
autoDismiss (config) | boolean | false | Cuando se alcanza maxOpened, elimina automáticamente el toast más antiguo para hacer sitio al nuevo. |
preventDuplicates (config) | boolean | false | Ignora un toast nuevo cuyo mensaje y tipo coinciden con uno ya visible, devolviendo en su lugar el manejador del toast existente. |
Outputs
Reacciona a lo que hace toast: 1 eventos a los que enganchar tu lógica.
| Nombre | Tipo | Descripción |
|---|---|---|
closed (hub-toast) | EventEmitter<number> | Emite el id del toast cuando este debe descartarse — tras el temporizador de descarte automático, un toque con tapToDismiss o el botón de cierre. |
Métodos
Controla toast desde el código — 7 métodos en su superficie programática.
| Nombre | Firma | Devuelve | Descripción |
|---|---|---|---|
ToastService.success | success(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the created toast | Muestra un toast de éxito con el mensaje dado, un título opcional y anulaciones de configuración por llamada. |
ToastService.error | error(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the created toast | Muestra un toast de error con el mensaje dado, un título opcional y anulaciones de configuración por llamada. |
ToastService.warning | warning(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the created toast | Muestra un toast de advertencia con el mensaje dado, un título opcional y anulaciones de configuración por llamada. |
ToastService.info | info(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the created toast | Muestra un toast informativo con el mensaje dado, un título opcional y anulaciones de configuración por llamada. |
ToastService.show | show(message: string, title?: string, config?: Partial<HubToastConfig>, type?: HubToastType | string): HubToastRef | HubToastRef handle for the created toast | Muestra un toast con una cadena de tipo integrada o personalizada; el tipo se aplica como data-type en el host del toast y gobierna el estilo del acento. |
ToastService.remove | remove(toastId: number): void | void | Elimina un toast concreto mediante el id devuelto por los métodos show. |
ToastService.clear | clear(): void | void | Elimina todos los toasts activos inmediatamente, completando el observable onHidden de cada toast. |
Templates
Todavía no hay templates documentados.