import { WrToast } from 'ngwr/toast';Toast
Short notifications that stack in a corner of the screen.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Global config
Set defaults once with withToast() in provideWr(). Fields you omit keep the library default.
import { bootstrapApplication } from '@angular/platform-browser';
import { provideWr } from 'ngwr';
import { withToast } from 'ngwr/toast';
import { AppComponent } from './app/app';
bootstrapApplication(AppComponent, {
providers: [
provideWr(
withToast({
position: 'bottom-end',
duration: 5000,
showProgress: true,
showCopy: true,
maxStack: 5,
labels: {
close: 'Закрыть',
copy: 'Копировать',
copied: 'Скопировано',
closeAll: 'Закрыть все',
},
}),
),
],
});Show a toast
show() opens a toast and returns a ref with dismiss().
this.toast.show({
type: 'success',
title: 'Saved',
message: 'Profile updated.',
});toast.show(...)Title or message alone
Either part can stand on its own. A title-only toast passes an empty message.
this.toast.show({ title: 'Saved', message: '' });
this.toast.show({ message: 'Link copied' });Per-toast overrides
show() takes every field of the global config.
this.toast.show({
message: 'Permalink copied to clipboard',
position: 'bottom',
showCopy: true,
duration: 6000,
});Close all
“Close all” appears once closeAllThreshold toasts are open; in stack mode, when the stack is expanded.
Persistent toast
duration: 0 turns off auto-dismiss and hides the progress bar.
this.toast.show({
type: 'danger',
message: 'Network error',
duration: 0, // no auto-dismiss
});Layout mode
stack (default) piles toasts up and fans them out on hover; list shows a column. Set it with withToast({ mode }) or setMode().
Position
All toasts share one stack, so a per-call position moves the whole stack.
this.toast.setPosition('bottom-end');Keyboard
Focus inside the stack pauses every countdown, and expands a collapsed stack so “Close all” can be reached.
Since v15, closing a toast from the keyboard moves focus to the Close button of the toast that takes its place, else the one before it. Closing the last one returns focus to where it was before it entered the stack.
Lifetime and scope
A toast outlives the component that raised it and survives navigation. Keep the ref to remove it early.
const ref = this.toast.show({ message: 'Uploading…', duration: 0 });
await this.upload();
ref.dismiss();withToast() in a route's providers is ignored: set it at bootstrap, or pass the value per call.
Service API
| Name | Description | Type | Default |
|---|---|---|---|
show(options) | Opens a toast and returns a handle (dismiss()). | (WrToastOptions) => WrToastRef | — |
dismiss(id) | Removes a single toast by id. | (number) => void | — |
dismissAll() | Removes every toast in the stack. | () => void | — |
setPosition(position) | Move the stack to another corner. | (WrToastPosition) => void | — |
setMode(mode) | Switch the stack layout. | (WrToastMode) => void | — |
WrToastOptions
Per-call options for show(). Omitted fields fall back to WrToastConfig.
| Name | Description | Type | Default |
|---|---|---|---|
type | Visual variant. | 'info' | 'success' | 'warning' | 'danger' | 'info' |
title | Optional heading. | string | — |
messagerequired | Body text. '' for a title-only toast. | string | — |
duration | Auto-dismiss after N ms. 0 disables. Falls back to global config. | number | config.duration |
dismissible | Show close (×) button. | boolean | true |
position | Corner of the stack. Moves the toasts already on screen too. | WrToastPosition | config.position |
showProgress | Override the progress bar visibility. | boolean | config.showProgress |
showCopy | Override the copy button visibility. | boolean | config.showCopy |
class | Extra classes on this toast's box, not the overlay pane. | WrClassInput | — |
WrToastConfig
Set once with withToast().
| Name | Description | Type | Default |
|---|---|---|---|
position | Default corner the stack renders in. | WrToastPosition | 'top-end' |
mode | Layout for several toasts: a cascade or a column. | WrToastMode | 'stack' |
duration | Default auto-dismiss in ms. 0 disables. | number | 4000 |
showProgress | Render a countdown bar; pauses on hover. | boolean | true |
showCopy | Render a copy-message button on each toast. | boolean | false |
showCloseAll | Render a "Close all" button above the stack. | boolean | true |
closeAllThreshold | Minimum stack size before "Close all" appears. | number | 2 |
maxStack | Max visible toasts. Extra toasts wait in a queue. 0 = unlimited. | number | 5 |
labels | UI strings. Override any one of them. | { close; copy; copied; closeAll } | — |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/toast's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-toast-accent | var(--wr-color-primary) | .wr-toast +1 variant override |
--wr-toast-action-padding | var(--wr-space-xs) | .wr-toast |
--wr-toast-action-radius | var(--wr-border-radius-sm) | .wr-toast |
--wr-toast-actions-gap | var(--wr-space-xs) | .wr-toast +1 variant override |
--wr-toast-bg | var(--wr-color-surface) | .wr-toast |
--wr-toast-border | var(--wr-border-base) | .wr-toast |
--wr-toast-font-family | var(--wr-font-family-base) | .wr-toast |
--wr-toast-gap | var(--wr-space-md) | .wr-toast |
--wr-toast-host-close-all-border | var(--wr-border-base) | .wr-toast-host__close-all |
--wr-toast-host-close-all-font-family | var(--wr-font-family-base) | .wr-toast-host__close-all |
--wr-toast-host-close-all-font-size | var(--wr-text-xs) | .wr-toast-host__close-all |
--wr-toast-host-close-all-font-weight | var(--wr-font-weight-medium) | .wr-toast-host__close-all |
--wr-toast-host-close-all-line-height | var(--wr-text-xs-leading) | .wr-toast-host__close-all |
--wr-toast-host-close-all-padding-x | var(--wr-space-md) | .wr-toast-host__close-all |
--wr-toast-host-close-all-padding-y | var(--wr-space-sm) | .wr-toast-host__close-all +1 variant override |
--wr-toast-host-close-all-radius | var(--wr-border-radius-base) | .wr-toast-host__close-all |
--wr-toast-host-gap | var(--wr-space-sm) | .wr-toast-host |
--wr-toast-i | var(--wr-toast-stack-index, 0) only under .wr-toast-host--stack:not(.wr-toast-host--expanded) .wr-toast — unset elsewhere | .wr-toast-host--stack:not(.wr-toast-host--expanded) .wr-toast |
--wr-toast-message | var(--wr-color-on-surface-muted) | .wr-toast |
--wr-toast-message-font-size | var(--wr-text-sm) | .wr-toast |
--wr-toast-message-line-height | var(--wr-text-sm-leading) | .wr-toast |
--wr-toast-padding-x | var(--wr-space-lg) | .wr-toast |
--wr-toast-padding-y | var(--wr-space-md) | .wr-toast |
--wr-toast-radius | var(--wr-border-radius-base) | .wr-toast |
--wr-toast-title | var(--wr-color-on-surface) | .wr-toast |
--wr-toast-title-font-size | var(--wr-text-sm) | .wr-toast |
--wr-toast-title-font-weight | var(--wr-font-weight-semibold) | .wr-toast |
--wr-toast-title-line-height | var(--wr-text-sm-leading) | .wr-toast |
--wr-toast-title-margin-bottom | var(--wr-space-xs) | .wr-toast |
Dependencies
| Angular CDK | portal |
|---|---|
| Built on | Overlay |