Toast

Easy pop-up notifications.

A "toast" is a notification that pops up on the user's screen. To use toasts, you must place an <ma-toast-outlet> somewhere in your layout. In this example, the outlet is placed inside the application component.

<ma-app>
  <ma-toast-outlet
    [service]='toastService'>
  </ma-toast-outlet>
  …
</ma-app>

After the outlet is wired to a ToastService instance, then you can display a toast by calling a method on that service. The service handles the placement of the toast and automatically removes the toast when it expires.

Display Toast

toastService.add(
  'primary',
  'Toast Title:',
  'This is a toast message.'
);

By default, the toast outlet has fixed position along the right side of the viewport, but this can be changed by styling the element with CSS.

Options

Customize color, icon, and duration.

The method takes 3 arguments: type, title, and message. The title has bold text while the message has regular text; either one may be set to null to skip it. The method also has two optional arguments: icon is the name of an icon to display, and durationSeconds is how long to display the toast (exclusive of fade in/fade out time).

The type property controls the color scheme and default icon. It must be one of primary, secondary, success, info, warning, or danger.

Secondary Toast Success Toast Info Toast Warning Toast Danger Toast

The final example shows a custom icon and duration.

Custom Toast

this.toastService.add(
  'primary',
  'Toast Title.',
  'This is a toast message.',
  icon: 'cube',
  durationSeconds: 10
);