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
Usage
To get started with the Toast component, first you need to install Ignite UI for Angular by typing 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 our app.module.ts file:
// app.module.ts
...
import { IgxToastModule } from 'igniteui-angular';
@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';
...
public toastPosition: IgxToastPosition;
public show(toast) {
this.toastPosition = IgxToastPosition.Top;
toast.show();
}
...
Styling
To get started with styling the toast, we need to import the index file, where all the theme functions and component mixins live:
@import '~igniteui-angular/lib/core/styles/themes/index';
Following the simplest approach, we create a new theme that extends the igx-toast-theme and accepts the $background, $text-color and the $border-radius parameters.
$dark-toast: igx-toast-theme(
$background: #292826,
$text-color: #FFCD0F,
$border-radius: 12px
);
The last step is to include the newly created theme.
@include igx-toast($dark-toast);
Note
If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep:
:host {
::ng-deep {
@include igx-toast($dark-toast);
}
}
Defining a color palette
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:
$yellow-color: #FFCD0F;
$black-color: #292826;
$dark-palette: igx-palette($primary: $black-color, $secondary: $yellow-color);
And then with igx-color we can easily retrieve color from the palette.
$dark-toast: igx-toast-theme(
$background: igx-color($dark-palette, "primary", 400),
$text-color: igx-color($dark-palette, "secondary", 400),
$border-radius: 12px
);
Note
The igx-color and igx-palette are powerful functions for generating and retrieving colors. Please refer to Palettes topic for detailed guidance on how to use them.
Using Schemas
Going further with the theming engine, 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 - dark-toast schema:
// Extending the toast schema
$dark-toast-schema: extend($_dark-toast,
(
background: (
igx-color: ("primary", 400)
),
text-color: (
igx-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 dark-schema
$custom-dark-schema: extend($dark-schema,(
igx-toast: $dark-toast-schema
));
// Defining toast with the global dark schema
$dark-toast: igx-toast-theme(
$palette: $dark-palette,
$schema: $custom-dark-schema
);
Don't forget to include the themes in the same way as it was demonstrated above.
API References
In this article we learned how to use and configure the IgxToastComponent. For more details in regards its API, take a look at the links below:
Styles:
