Angular Toast Notification Service | ng-hub-ui-toast

Standalone Angular toast notification service with Signals, lifecycle observables, progress bar, six positions and full CSS variable theming.

API reference

Here's the full contract for toast: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial toast in with 10 inputs. Bind them like any Angular @Input.

NameTypeDefaultDescription
data (hub-toast)RequiredHubToastDataThe toast to render: id, type, message, optional title, resolved config and lifecycle subjects. Provided internally by ToastContainerComponent — you normally never bind it yourself.
timeOut / extendedTimeOut (config)number5000 / 2500timeOut is the duration in ms before auto-dismiss (0 = persistent); extendedTimeOut is the extra time granted after the user stops hovering the toast.
closeButton / progressBar (config)booleantrue / falsecloseButton shows a dismiss button on the toast; progressBar shows a bar counting down to auto-dismissal.
tapToDismiss (config)booleantrueCloses the toast when the user clicks anywhere on it.
disableTimeOut (config)boolean | 'timeOut' | 'extendedTimeOut'falseDisables auto-dismiss: true or 'timeOut' disables the initial timer; 'extendedTimeOut' disables only the hover extension.
newestOnTop (config)booleantrueWhen true, the newest toast is inserted at the top of the stack instead of the bottom.
positionClass (config)HubToastPosition | string'toast-top-right'Screen position of the toast container: one of the six built-in toast-top/bottom-left/center/right classes, or a custom class string.
maxOpened (config)number0Maximum number of simultaneously visible toasts; 0 means unlimited.
autoDismiss (config)booleanfalseWhen maxOpened is reached, automatically removes the oldest toast to make room for the new one.
preventDuplicates (config)booleanfalseIgnores a new toast whose message and type match one already visible, returning the existing toast's handle instead.

Outputs

React to what toast does — 1 events to hook your logic onto.

NameTypeDescription
closed (hub-toast)EventEmitter<number>Emits the toast id when the toast should be dismissed — after the auto-dismiss timer, a tap with tapToDismiss, or the close button.

Methods

Drive toast from code — 7 methods on its programmatic surface.

NameSignatureReturnsDescription
ToastService.successsuccess(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the created toastShows a success toast with the given message, optional title and per-call config overrides.
ToastService.errorerror(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the created toastShows an error toast with the given message, optional title and per-call config overrides.
ToastService.warningwarning(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the created toastShows a warning toast with the given message, optional title and per-call config overrides.
ToastService.infoinfo(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRefHubToastRef handle for the created toastShows an informational toast with the given message, optional title and per-call config overrides.
ToastService.showshow(message: string, title?: string, config?: Partial<HubToastConfig>, type?: HubToastType | string): HubToastRefHubToastRef handle for the created toastShows a toast with a built-in or custom type string; the type is applied as data-type on the toast host and drives the accent styling.
ToastService.removeremove(toastId: number): voidvoidRemoves a specific toast by the id returned from the show methods.
ToastService.clearclear(): voidvoidRemoves all active toasts immediately, completing each toast's onHidden observable.

Templates

No templates documented yet.