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

    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

    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
        imports: [..., IgxToastModule],
    export class AppModule {}

    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
        selector: 'app-home',
        template: `
        <button igxButton="contained" (click)="">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;

    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.

    <button igxButton="contained" (click)="">Show notification</button>
    <igx-toast #toast>Notification displayed</igx-toast>

    Another way to set the toast content is to directly pass the message as a parameter to the open() method.

    <button igxButton="contained" (click)="'Notification displayed')">Show notification</button>
    <igx-toast #toast></igx-toast>

    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() {;

    The igx-toast component show and hide methods have been deprecated. open and close should be used instead.


    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.

    <button igxButton="contained" (click)="">Show Toast</button>
    <button igxButton="contained" (click)="toast.close()">Hide Toast</button>
    <igx-toast #toast [autoHide]="false">Notification displayed</igx-toast>

    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.

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

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


    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.

        <button igxButton="contained" (click)="open(toast)">Show notification on top</button>
        <igx-toast #toast>Notification displayed</igx-toast>
    // 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;;

    Overlay Settings

    The IgxToastComponent uses Overlay Settings to control the position of its container. The default settings can be changed by defining Custom OverlaySettings and passing them to the toast open() method:

    public customSettings: OverlaySettings = {
        positionStrategy: new GlobalPositionStrategy(
                horizontalDirection: HorizontalAlignment.Left,
                verticalDirection: VerticalAlignment.Top
        modal: true,
        closeOnOutsideClick: true,

    Users can also provide a specific outlet where the toast will be placed in the DOM when it is visible:

    <igx-toast [outlet]="igxBodyOverlayOutlet"></igx-toast>
    <div #igxBodyOverlayOutlet igxOverlayOutlet></div>


    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';

    Following the simplest approach, we create a new theme that extends the toast-theme and accepts the $shadow, $background, $text-color and the $border-radius parameters.

    $custom-toast-theme: toast-theme(
        $background: #dedede,
        $text-color: #151515,
        $border-radius: 12px

    Using CSS variables

    The last step is to pass the custom toast theme:

    @include css-vars($custom-toast-theme);

    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:

    :host {
        ::ng-deep {
            // Pass the custom toast theme to the `igx-toast` mixin
            @include toast($custom-toast-theme);

    Using color palettes

    Instead of hardcoding the color values, like we just did, we can achieve greater flexibility in terms of colors by using the igx-palette and igx-color functions.

    igx-palette generates a color palette based on the primary and secondary colors that are passed:

    $white-color: #dedede;
    $black-color: #151515;
    $light-toast-palette: palette($primary: $white-color, $secondary: $black-color);

    And then with igx-color we can easily retrieve color from the palette.

    $custom-toast-theme: toast-theme(
        $background: color($light-toast-palette, "primary", 400),
        $text-color: color($light-toast-palette, "secondary", 400),
        $border-radius: 12px

    The igx-color and igx-palette are powerful functions for generating and retrieving colors. Please refer to the Palettes topic for detailed guidance on how to use them.

    Using schemas

    You can build a robust and flexible structure that benefits from schemas. A schema is a recipe of a theme.

    Extend one of the two predefined schemas, that are provided for every component, in this case - light-toast schema:

    //  Extending the toast schema
    $light-toast-schema: extend($_light-toast,
            background: (
               color: ("primary", 400)
            text-color: (
               color: ("secondary", 400)
            border-radius: 12px

    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:

    // Extending the global light-schema
    $custom-light-schema: extend($light-schema,(
        igx-toast: $light-toast-schema
    // Defining toast with the global light schema
    $custom-toast-theme: toast-theme(
      $palette: $light-toast-palette,
      $schema: $custom-light-schema

    Don't forget to include the themes in the same way as it was demonstrated above.

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.