Toast Notification

Global Toaster

1. Use our provideToaster function to create a toaster instance near the root of your application.
2. Inject the ToasterService.
3. Import and render the q-toaster directive with the ToasterService.toaster property.

import {Component} from "@angular/core"
import {provideToaster, ToasterService} from "@qualcomm-ui/angular/toast"

@Component({
  providers: [provideToaster({placement: "bottom-end"})],
  template: `
    <div q-toaster [toaster]="toaster"></div>
    <!-- the rest of your app... -->

  `
})
export class AppComponent {
  protected readonly toaster = inject(ToasterService).toaster
}

To customize toast rendering, you can provide an <ng-template> child element to the q-toaster directive. If children are omitted, a fallback element will be used instead.

<div q-toaster [toaster]="toaster">
  <!-- typesafe toast object is available via the q-toast-context directive -->
  <ng-template q-toast-context let-toast>
    <div q-toast-root>
      <h3 q-toast-label>{{ toast.title }}</h3>
      <p q-toast-description>{{ toast.description }}</p>
      <button q-toast-close-button></button>
    </div>
  </ng-template>
</div>

With Action

Use the action property to add an action button to the toast.

Toast Emphasis

Here's an example of each toast type.

Overlapping Toasts

By default, toasts are stacked on top of each other. To conserve space when rendering many toasts, set the overlap property to true in the createToaster function.

Toast Duration

Use the duration property to set the duration of the toast.

Persistent Toast

Set the type property to loading to make the toast stay on screen until dismissed.

Pause and Resume

Use the pause and resume methods on the toaster instance to pause and play the toast.

Pausing a toast prevents it from timing out, while resuming it will continue the timeout from the remaining duration.

Max Visible

Set the max prop on the createToaster function to define the maximum number of toasts that can be rendered at a time. Extra toasts will be queued and rendered when the number of visible toasts drops below the max.

Screen Placement

Toasts can be displayed on all four corners of a page. We recommend picking a single placement for your app, as this creates a consistent experience for your users.

ToastCreateOptions

These are the options passed to the toaster.create function.

{
  label: string
  onClick: () => void
}

boolean

true

string

number

string

string

Record<
  string,
  any
>

(
  details: ToastStatusChangeDetails,
) => void

number

200

| 'success'
| 'danger'
| 'loading'
| 'info'
| 'warning'
| 'neutral'

{
  label: string
  onClick: () => void
}

boolean

string

number

string

string

Record<
  string,
  any
>

(
  details: ToastStatusChangeDetails,
) => void

number

| 'success'
| 'danger'
| 'loading'
| 'info'
| 'warning'
| 'neutral'

ToasterCreateOptions

Options passed to the createToaster / provideToaster functions.

number

number

16

number

12

| string
| Record<
    | 'bottom'
    | 'left'
    | 'right'
    | 'top',
    string
  >

"1rem"

boolean

false

boolean

true

| 'top-start'
| 'top'
| 'top-end'
| 'bottom-start'
| 'bottom'
| 'bottom-end'

"bottom-end"

number

200

number

number

number

| string
| Record<
    | 'bottom'
    | 'left'
    | 'right'
    | 'top',
    string
  >

boolean

boolean

| 'top-start'
| 'top'
| 'top-end'
| 'bottom-start'
| 'bottom'
| 'bottom-end'

number

ToasterInstance

This is the instance returned from the createToaster function.

ToasterCreateOptions

(
  data: ToastOptions<string>,
) => string

(
  id?: string,
) => void

() => number

() => Partial<
  ToastApiProps<string>
>[]

(
  id: string,
) => boolean

(
  id: string,
) => boolean

(
  id?: string,
) => void

(
  promise:
    | Promise<T>
    | (() => Promise<T>),
  options: ToastPromiseOptions<string>,
  shared?: Omit<
    ToastOptions<V>,
    'type'
  >,
) => {
  id: string
  unwrap: () => Promise<T>
}

(
  id?: string,
) => void

(
  id?: string,
) => void

(
  subscriber: (
    ...args: any[]
  ) => void,
) => VoidFunction

(
  id: string,
  data: Partial<
    ToastApiProps<V>
  >,
) => string

ToasterCreateOptions

(
  data: ToastOptions<string>,
) => string

(
  id?: string,
) => void

() => number

() => Partial<
  ToastApiProps<string>
>[]

(
  id: string,
) => boolean

(
  id: string,
) => boolean

(
  id?: string,
) => void

(
  promise:
    | Promise<T>
    | (() => Promise<T>),
  options: ToastPromiseOptions<string>,
  shared?: Omit<
    ToastOptions<V>,
    'type'
  >,
) => {
  id: string
  unwrap: () => Promise<T>
}

(
  id?: string,
) => void

(
  id?: string,
) => void

(
  subscriber: (
    ...args: any[]
  ) => void,
) => VoidFunction

(
  id: string,
  data: Partial<
    ToastApiProps<V>
  >,
) => string

ToastPromiseOptions

These are the options passed to the toaster.promise function.

Omit<
  ToastOptions,
  'type'
>

(
  response: any,
) => Omit<
  ToastOptions<V>,
  'type'
>

() => void | Promise<void>

(
  response: any,
) => Omit<
  ToastOptions<V>,
  'type'
>

Omit<
  ToastOptions,
  'type'
>

(
  response: any,
) => Omit<
  ToastOptions<V>,
  'type'
>

() => void | Promise<void>

(
  response: any,
) => Omit<
  ToastOptions<V>,
  'type'
>

ToastStatusChangeDetails

string

| 'visible'
| 'dismissing'
| 'unmounted'

string

| 'visible'
| 'dismissing'
| 'unmounted'