Toast

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

Toast Demo

Usage

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

<igx-toast #toast
           message="Something happened!">
</igx-toast>

You can be more descriptive and set message message="Something happened!".

You can show the toast by using toast.show() method.

You can hide the toast by using toast.hide() method.

Positioning

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

<igx-toast #toast
           message="Something happened!"
           position="IgxToastPosition.Top">
</igx-toast>

You can modify the position of the toast by setting postion="IgxToastPosition.Top".

Events

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

<igx-toast #toast
           message="Something happened!"
           (onShowing)="onToastShowing($event)"
           (onShown)="onToastShown($event)"
           (onHiding)="onToastShowing($event)"
           (onHidden)="onToastHidden($event)">
</igx-toast>

You can handle the onShowing event by using (onShowing)="someFunc($event)". You can handle the onShown event by using (onShowing)="someFunc($event)". You can handle the onHiding event by using (onHiding)="someFunc($event)". You can handle the onHidden event by using (onHidden)="someFunc($event)".