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.
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.
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
.
The final example shows a custom icon and duration.
this.toastService.add( 'primary', 'Toast Title.', 'This is a toast message.', icon: 'cube', durationSeconds: 10 );