Toast
App-wide toast notifications — an injectable ToastService queue rendered once by
tip-toast-host (mounted in app-shell).
Selector: tip-toast-host (no selector for ToastService — it's an injectable, providedIn: 'root')
API — ToastService
| Name | Type | Default | Description |
|---|---|---|---|
toasts (signal, read-only) |
ToastMessage[] = {id, message, tone}[] |
[] |
Current queue; read by tip-toast-host. |
show(message, opts?) |
(string, ToastOptions?) => number |
— | Queues a toast, returns its id. opts.tone ('default'|'success'|'critical', default 'default'), opts.duration (ms, default 4000, auto-dismisses). |
dismiss(id) |
(number) => void |
— | Removes a toast immediately. |
API — tip-toast-host
No inputs/outputs — injects ToastService directly and renders its toasts() queue as a
fixed bottom-center stack. Mount once, typically in the app shell.
Usage
private readonly toast = inject(ToastService);
this.toast.show('Settings saved', { tone: 'success' });
this.toast.show('Settings reset to defaults', { tone: 'success' });
this.toast.show('Settings exported'); // default tone, no icon
<!-- app-shell.ts template, once for the whole app -->
<tip-toast-host />
Notes
defaulttone shows aninfoicon at a muted color;successshowscircle-checkin emerald;criticalshowstriangle-alertin red.- Host container is
pointer-events: none(so it never blocks clicks behind it) while each individual toast re-enablespointer-events: autofor its dismiss button. aria-live="polite"+role="status"on the host — screen readers announce new toasts without interrupting.- Don't mount
tip-toast-hostmore than once per app; every instance renders the same singletonToastServicequeue, so duplicates would show every toast twice.