Toast

Overview

Import ToastContainerComponent and mount <gog-toast-container /> once — typically near the root of your app. Every ToastService call renders through that single outlet, so it only needs to exist once no matter how many places call it.

import { ToastContainerComponent, ToastService } from '@guildofgleks/ui';

@Component({
  // ...
  imports: [ToastContainerComponent],
})
export class AppComponent {
  // Mount <gog-toast-container /> once, near the root of your app.
}

Basic usage — inject the service, call a shorthand method:

<gog-button (gogClick)="showToast()">Preview toast</gog-button>
<gog-toast-container />

Examples

<gog-inputfield label="Message" [(value)]="toastMessage" />
<gog-select label="Type" [options]="toastTypes" [(value)]="toastType" />
<gog-select label="Position" [options]="positions" [(value)]="toastPosition" />
<gog-button (gogClick)="showConfigured()">Preview toast</gog-button>

this.toastService.success('Success — saved successfully.');
this.toastService.error('Error — something went wrong.');
this.toastService.warning('Warning — check this before continuing.');
this.toastService.info('Info — just so you know.');

this.toastService.show({
  message: 'File deleted',
  type: 'info',
  actions: [
    { label: 'Undo', iconName: 'close', onClick: () => this.restoreFile() },
  ],
});

this.toastService.show({
  message: 'Stays until dismissed or dismissAll() is called.',
  type: 'warning',
  isSticky: true,
});

this.toastService.show({
  message: 'Auto-dismisses after 10s instead of the 4s default.',
  type: 'info',
  duration: 10000,
});

for (let index = 1; index <= 7; index += 1) {
  this.toastService.info(`Queued toast ${index}`, { position: 'top-right' });
}

App-wide defaults

The corner toasts appear in and how long they stay up were constants until 21.3.0; both are now settable once, app-wide. An individual show() call still overrides them. See Global Configuration for the full set of keys.

import { provideGogConfig } from '@guildofgleks/ui';

bootstrapApplication(App, {
  providers: [
    provideGogConfig({
      toast: {
        position: 'top-right',
        duration: 6000,
      },
    }),
  ],
});

How a toast is announced 21.3.2

Announcements come from two permanently-mounted live regions on gog-toast-container — one polite, one assertive — and the toast's type decides which one its text is written into (assertive for error and warning, polite otherwise).

Individual toasts therefore carry no role or aria-live of their own. A live region has to exist before the text lands in it to be announced at all; one created together with the toast is a region the screen reader has not been watching. This only matters to you if you were styling or querying those attributes on a toast element.

API Reference

ToastConfig

Passed to ToastService.show(config).

ToastService methods

gog-toast-container — Inputs

Styling Tokens

Every CSS custom property the toast paints with. Override any of them — on a single instance, a subtree, or a theme — to restyle it. See the Theming guide for the full token-layering model, or the Theme Generator to tweak these live.