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 12 inputs. Se enlazan como cualquier @Input de Angular.

NombreTipoPor defectoDescripción
data (hub-toast)ObligatorioHubToastData—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ú.
position (hub-toast-container)HubToastPosition | string'toast-top-right'La esquina de la que se ocupa este contenedor. Solo renderiza los toasts cuyo positionClass coincide, que es lo que impide que una notificación nueva mueva a las que ya están en pantalla. ToastService lo asigna al montar el contenedor.
timeOut / extendedTimeOut (config)number5000 / 2500timeOut 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)booleantrue / falsecloseButton muestra un botón de descarte en el toast; progressBar muestra una barra con la cuenta atrás hasta el descarte automático.
closeButtonAriaLabel (config)string'Close'Nombre accesible que se anuncia para el botón de cierre. El glifo × es decorativo, así que este es el único nombre que un lector de pantalla tiene para él; tradúcelo en aplicaciones que no estén en inglés.
tapToDismiss (config)booleantrueCierra el toast cuando el usuario hace clic en cualquier parte de él.
disableTimeOut (config)boolean | 'timeOut' | 'extendedTimeOut'falseDesactiva el descarte automático: true o 'timeOut' desactivan el temporizador inicial; 'extendedTimeOut' desactiva solo la extensión por hover.
newestOnTop (config)booleantrueCuando 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'Esquina en la que se muestra este toast: una de las seis clases integradas toast-top/bottom-left/center/right, o una clase propia. Cada posición tiene su propio contenedor.
maxOpened (config)number0Número máximo de toasts visibles a la vez, contando todas las posiciones y no cada esquina por separado; 0 significa ilimitado.
autoDismiss (config)booleanfalseAl alcanzar maxOpened, elimina automáticamente el toast más antiguo en pantalla para hacer sitio; como el límite es global, puede ser uno de otra esquina. Cuando está apagado, la llamada se descarta y su HubToastRef informa dropped: true.
preventDuplicates (config)booleanfalseIgnora 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.

NombreTipoDescripción
closed (hub-toast)OutputEmitterRef<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.

NombreFirmaDevuelveDescripción
HubToastService.successsuccess(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was fullMuestra un toast de éxito con el mensaje dado, un título opcional y anulaciones de configuración por llamada.
HubToastService.errorerror(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was fullMuestra un toast de error con el mensaje dado, un título opcional y anulaciones de configuración por llamada.
HubToastService.warningwarning(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was fullMuestra un toast de advertencia con el mensaje dado, un título opcional y anulaciones de configuración por llamada.
HubToastService.infoinfo(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was fullMuestra un toast informativo con el mensaje dado, un título opcional y anulaciones de configuración por llamada.
HubToastService.showshow(message: string, title?: string, config?: Partial<HubToastConfig>, type?: HubToastType | string): HubToastRefHubToastRef handle for the toast, or a handle with dropped: true when the stack was fullMuestra 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.
HubToastService.removeremove(toastId: number): voidvoidElimina un toast concreto mediante el id devuelto por los métodos show.
HubToastService.clearclear(): voidvoidElimina todos los toasts activos inmediatamente, completando el observable onHidden de cada toast.

Templates

Todavía no hay templates documentados.