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.

Toast Demo

Note

To start using Ignite UI for Angular components in your own projects, make sure you have configured all necessary dependencies and have performed the proper setup of your project. You can learn how to do this in the installation topic.

Usage

To get started with the Ignite UI for Angular Toast, let's first import the IgxToastModule in our app.module.ts file:

// app.module.ts

...
import { IgxToastModule } from 'igniteui-angular/main';

@NgModule({
    ...
    imports: [..., IgxToastModule],
    ...
})
export class AppModule {}

Show Toast

In order to display the toast component, use its show() method and call it on a button click. Use the message input to set a notification.

<!--sample.component.html-->

<button igxButton="raised" (click)="toast.show()">Show notification</button>
<igx-toast #toast message="Notification displayed"></igx-toast>

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

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. In this way, the toast remains visible. Using the toast hide() method, you can close the component.

<!--sample.component.html-->

<button igxButton="raised" (click)="toast.show()">SHOW TOAST</button>
<button igxButton="raised" (click)="toast.hide()">HIDE TOAST</button>
<igx-toast #toast message="Notification displayed" [autoHide]="false"></igx-toast>

If the sample is configured properly, the toast appears when the 'SHOW' button is clicked. The auto hide feature is disabled and the toast disappears on 'HIDE' button click.

Display Time

Use displayTime and set it to an interval in milliseconds to configure how long the toast component is visible.

<!--sample.component.html-->

<button igxButton="raised" (click)="toast.show()">Show notification</button>
<igx-toast #toast message="Notification displayed" displayTime="1000"></igx-toast>

If the sample is configured properly, the toast auto hides faster.

Positioning

Use position to configure where the toast appears. By default, the toast is displayed at the bottom of the page. In the sample below, we set notification to appear at the top position.

<!--sample.component.html-->

<div>
    <button igxButton="raised" (click)="show(toast)">Show notification on top</button>
    <igx-toast #toast message="Notification displayed" [position]="toastPosition"></igx-toast>
</div>
// sample.component.ts

import { IgxToastPosition } from "igniteui-angular/main";

...
public toastPosition: IgxToastPosition;
public show(toast) {
    this.toastPosition = IgxToastPosition.Top;
    toast.show();
}
...

API Summary

The following tables summarize some of the useful igx-toast component inputs, outputs and methods.

Inputs

The following inputs are available in the igx-toast component:

Name Type Description
autoHide boolean Specifies whether the toast is automatically hidden after displayTime. By default, autoHide is set to true.
displayTime number Specifies the interval in milliseconds in which the toast is visible. By default, displayTime is set to 4000 milliseconds.
isVisible boolean Specifies the component visual state. By default, isVisible is set to false.
message string Specifies the displayed message.
position IgxToastPosition Specifies the toast position. Possible options are IgxToastPosition.Top, IgxToastPosition.Middle, IgxToastPosition.Bottom. By default, position is set to IgxToastPosition.Bottom.

Outputs

The following outputs are available in the igx-toast component:

Name Description
onShowing Emits an event prior to the toast being shown.
onShown Emits an event when the toast is shown.
onHiding Emits an event prior to the toast being hidden.
onHidden Emits an event when the toast is hidden.

Methods

The following methods are available for the igx-toast component:

Name Description
show() Shows the toast component and hides it after displayTime if autoHide is set to true.
hide() Hides the toast component.

Additional Resources

Our community is active and always welcoming to new ideas.