Toastr

BkToastrService + bk-toastr, an imperative toast system. The container mounts itself on document.body the first time you call the service, so there is nothing to place in a template.

BkToastrServiceMessaging and overlaysAngular

Preview

A working preview of Toastr in the Brickclay style. Try it.

Interact with the preview to see events here.

Interactive playground

this.toastr.show({
  summary: 'Client added successfully.',
  severity: 'success',
  actionLabel: 'Undo',
  actionCallback: () => { /* ... */ },
});

Action callback log

Set an actionLabel, click "Show toast", then click the action button on the toast itself to see actionCallback fire here.

Toast options `(ToastConfig)`

Option	Type	Default	Description
`summary`	`string`	–	Required. The bold headline text.
`detail`	`string`	–	Optional secondary line under the summary.
`severity`	`ToastSeverity`	`'info'`	info, success, error, warn, default.
`timeOut`	number `(ms)`	`4000`	Auto-dismiss delay. Ignored when sticky is true.
`sticky`	`boolean`	`false`	Disables the auto-dismiss timer; only `close()` or the × removes it.
`icon`	`boolean`	`true`	Shows the leading status icon.
`inline`	`boolean`	`true`	Below 425px width, false wraps to a 2-row grid instead of staying on one line.
`actionLabel`	`string`	–	Shows a secondary action button with this label.
`actionCallback`	`() => void`	–	Fires when the action button is clicked.

API reference

Service member	Description
`show(config)`	Full control: summary, detail, severity, timeOut, sticky, icon, inline, actionLabel/actionCallback.
`success / error / warn / info / default(summary, detail?)`	Convenience wrappers around `show()`.
`close(id) / clear()`	Dismiss one toast, or all of them.
`setPosition(position)`	One of the 6 corner/center positions; applies to all toasts.