Toast

The Ignite UI for Angular Toast component provides information and warning messages that are non-interactive and cannot be dismissed by the user. Notifications can be displayed at the bottom, the middle, or the top of the page.

Demo

Usage

First Steps

To get started with the Toast component, first you need to import the IgxToastModule in our app.module.ts file:

If the sample is configured properly, a toast appears displaying a notification when the button is clicked.

Examples

Hide/Auto Hide

Once opened, the toast disappears after a period specified by the displayTime input which is set initially to 4000 milliseconds. This behavior is enabled by default but you can change this by setting autoHide to false. This way, the toast remains visible. Using the toast hide() method, you can close the component.

Using CSS variables

Using mixins

In order to style components for older browsers, like Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables.

If the component is using the Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep. To prevent the custom theme to leak into other components, be sure to include the :host selector before ::ng-deep:

In order to apply our custom schemas we have to extend one of the globals (light or dark), which is basically pointing out the components with a custom schema, and after that add it to the respective component themes: