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.
| Name | Type | Default | Description |
|---|---|---|---|
data (hub-toast)Required | HubToastData | — | The 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) | number | 5000 / 2500 | timeOut 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) | boolean | true / false | closeButton shows a dismiss button on the toast; progressBar shows a bar counting down to auto-dismissal. |
tapToDismiss (config) | boolean | true | Closes the toast when the user clicks anywhere on it. |
disableTimeOut (config) | boolean | 'timeOut' | 'extendedTimeOut' | false | Disables auto-dismiss: true or 'timeOut' disables the initial timer; 'extendedTimeOut' disables only the hover extension. |
newestOnTop (config) | boolean | true | When 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) | number | 0 | Maximum number of simultaneously visible toasts; 0 means unlimited. |
autoDismiss (config) | boolean | false | When maxOpened is reached, automatically removes the oldest toast to make room for the new one. |
preventDuplicates (config) | boolean | false | Ignores 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.
| Name | Type | Description |
|---|---|---|
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.
| Name | Signature | Returns | Description |
|---|---|---|---|
ToastService.success | success(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the created toast | Shows a success toast with the given message, optional title and per-call config overrides. |
ToastService.error | error(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the created toast | Shows an error toast with the given message, optional title and per-call config overrides. |
ToastService.warning | warning(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the created toast | Shows a warning toast with the given message, optional title and per-call config overrides. |
ToastService.info | info(message: string, title?: string, config?: Partial<HubToastConfig>): HubToastRef | HubToastRef handle for the created toast | Shows an informational toast with the given message, optional title and per-call config overrides. |
ToastService.show | show(message: string, title?: string, config?: Partial<HubToastConfig>, type?: HubToastType | string): HubToastRef | HubToastRef handle for the created toast | Shows 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.remove | remove(toastId: number): void | void | Removes a specific toast by the id returned from the show methods. |
ToastService.clear | clear(): void | void | Removes all active toasts immediately, completing each toast's onHidden observable. |
Templates
No templates documented yet.