Overview
tng-snackbar-host shows transient, non-blocking notifications. You control the list via items (TngSnackbarItem[]) and handle dismiss to remove items. Each item has id, message, optional intent (default | success | info | warning | error), actionLabel, and durationMs (auto-dismiss). Use position and max. Slot-based styling: host, item, itemInner, message, action, dismissBtn, intentSuccess/Info/Warning/Error.
Quick example
Basic
<button (click)="showSnackbar()">Show snackbar</button>
<tng-snackbar-host
[items]="items()"
position="bottom-center"
(dismiss)="onDismiss($event)"
/>
import { signal } from '@angular/core';
import { TngSnackbarHost, TngSnackbarItem } from '@tailng-ui/ui/overlay';
items = signal<TngSnackbarItem[]>([]);
showSnackbar() {
this.items.set([{ id: crypto.randomUUID(), message: 'Hello from Tailng', durationMs: 4000 }, ...this.items()]);
}
onDismiss(ev: { id: string; reason: 'timeout' | 'dismiss' | 'action' }) {
this.items.set(this.items().filter((x) => x.id !== ev.id));
}Features
Controlled items
Bind items (TngSnackbarItem[]) and handle dismiss to remove items. Add items by pushing to your array/signal.
Intents & auto-dismiss
intent: default | success | info | warning | error. actionLabel for a button; durationMs for auto-dismiss (0 = no auto-dismiss).
Slot styling
host, item, itemInner, message, action, dismissBtn, intentSuccess/Info/Warning/Error.