Angular Toast Component Overview
The Ignite UI for Angular Toast component provides information and warning messages that are auto-hiding, non-interactive and cannot be dismissed by the user. Notifications can be displayed at the bottom, the middle, or the top of the page.
Angular Toast Example
Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.
Getting Started with Ignite UI for Angular Toast
To get started with the Ignite UI for Angular Toast component, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:
ng add igniteui-angular
cmd
For a complete introduction to the Ignite UI for Angular, read the getting started topic.
The next step is to import the IgxToastModule
in your app.module.ts file.
// app.module.ts
...
import { IgxToastModule } from 'igniteui-angular';
// import { IgxToastModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
...
imports: [..., IgxToastModule],
...
})
export class AppModule {}
typescript
Alternatively, as of 16.0.0
you can import the IgxToastComponent
as a standalone dependency.
// home.component.ts
import { IgxToastComponent, IgxButtonDirective } from 'igniteui-angular';
// import { IgxToastComponent, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: `
<button igxButton="contained" (click)="toast.open()">Show notification</button>
<igx-toast #toast>Notification displayed</igx-toast>
`,
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxToastComponent, IgxButtonDirective]
/* or imports: [IgxTimePickerComponent, IgxButtonDirective] */
})
export class HomeComponent {
public time: Date;
}
typescript
Now that you have the Ignite UI for Angular Toast module or component imported, you can start using the igx-toast
component.
Using the Angular Toast
Show Toast
In order to display the toast component, use its open()
method and call it on a button click. You can pass the toast content inside the element.
<!--sample.component.html-->
<button igxButton="contained" (click)="toast.open()">Show notification</button>
<igx-toast #toast>Notification displayed</igx-toast>
html
Another way to set the toast content is to directly pass the message as a parameter to the open()
method.
<!--sample.component.html-->
<button igxButton="contained" (click)="toast.open('Notification displayed')">Show notification</button>
<igx-toast #toast></igx-toast>
html
The open()
method can also be used in the AppComponent file to manage the value of the message.
// app.component.ts
@ViewChild('toast', { read: IgxToastComponent }) public toast: IgxToastComponent;
public message: any;
public ngOnInit() {
this.message = 'Display message';
}
public showMessage() {
this.toast.open(this.message);
}
typescript
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 close()
method, you can close the component.
<!--sample.component.html-->
<button igxButton="contained" (click)="toast.open()">Show Toast</button>
<button igxButton="contained" (click)="toast.close()">Hide Toast</button>
<igx-toast #toast [autoHide]="false">Notification displayed</igx-toast>
html
If the sample is configured properly, the toast will appear when the Show button is clicked. For the first component auto-hide feature is disabled and the toast will disappear on 'Hide' button click.
In the other two components you can see in action how to pass different messages through the open()
method and use content projection.
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="contained" (click)="toast.open()">Show notification</button>
<igx-toast #toast displayTime="1000">Notification displayed</igx-toast>
html
If the sample is configured properly, the toast auto hides faster.
Positioning
Use positionSettings
property to configure where the toast appears. By default, it 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="contained" (click)="open(toast)">Show notification on top</button>
<igx-toast #toast>Notification displayed</igx-toast>
</div>
html
// sample.component.ts
import { VerticalAlignment } from 'igniteui-angular';
// import { VerticalAlignment } from '@infragistics/igniteui-angular'; for licensed package
...
public open(toast) {
toast.positionSettings.verticalDirection = VerticalAlignment.Top;
toast.open();
}
...
typescript
Styling
To get started with styling the toast, we need to import the index file, where all the theme functions and component mixins live:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss
Following the simplest approach, we create a new theme that extends the toast-theme
and accepts the $background
, $text-color
and $border-radius
parameters.
$custom-toast-theme: toast-theme(
$background: #dedede,
$text-color: #151515,
$border-radius: 12px
);
scss
Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the palette
and color
functions. Please refer to Palettes
topic for detailed guidance on how to use them.
The last step is to pass the custom toast theme:
@include css-vars($custom-toast-theme);
scss
Demo
API References
Additional Resources
Our community is active and always welcoming to new ideas.