Primitives

Toast

A toast is a non-modal, unobtrusive window element used to display brief, auto-expiring messages to the user.

Import

Import the Toast primitives from ng-primitives/toast.

import { NgpToast } from 'ng-primitives/toast';

Usage

Assemble the toast directives in your template.

<button (click)="toast.show()">Show Toast</button>

<ng-template ngpToast #toast="ngpToast">
  <div>...</div>
</ng-template>

To show a toast, call the show method on the ngpToast directive.

API Reference

The following directives are available to import from the ng-primitives/toast package:

The duration in milliseconds that the toast will be visible.

The position of the toast.

The gravity of the toast. This will determine the location the toast will slide in and out.

Whether the toast should stop the timer when hovered over. Once the mouse leaves the toast, the timer will restart.

The `aria-live` attribute value for the toast. This will determine how the toast will be read by screen readers.

NgpToast

Selector: [ngpToast]
Exported As: ngpToast

Data Attributes

The following data attributes are applied to the first child of the ngpToast ng-template:

Attribute	Description	Value
`data-toast`	The visible state of the toast.	`visible` \| `hidden`
`data-position`	The position of the toast.	`start` \| `center` \| `end`
`data-gravity`	The gravity of the toast.	`top` \| `bottom`

Global Configuration

You can configure the default options for all toasts in your application by using the provideNgpToastConfig function in a providers array.

import { provideToastConfig } from 'ng-primitives/toast';

bootstrapApplication(AppComponent, {
  providers: [
    provideToastConfig({
      duration: 5000,
      position: 'center',
      gravity: 'top',
      stopOnHover: false,
      ariaLive: 'assertive',
      gap: 16,
    }),
  ],
});

NgpToastConfig