The Toast component provides a built-in utility function to render the toast with minimal code. The utility function will render the toast without the need of rendering the container element in the DOM where the toast is appended. So that, the toast can now be rendered on the go. The following are the option to render the toast using the utility function.
The Toast component support 4 types of predefined toast with essential colors for various situations which can be shown using the ToastUtility.show by just defining the type of the toast without defining any class names. The following options are used as an argument on calling the utility function for predefined types:
| Options | Description |
|---|---|
| content | Specifies the content that can be displayed on the Toast. |
| type | Specifies the type of the predefined Toasts. The 4 types of predefined toasts are Information, Success, Error, Warning |
| timeOut | Specifies the Toast display time duration on the page in milliseconds. Once the time expires, Toast message will be removed. Setting 0 as a time out value displays the Toast on the page until the user closes it manually. |
import { Component, ViewChild } from '@angular/core';
import { closest} from '@syncfusion/ej2-base';
import { ToastUtility } from '@syncfusion/ej2-notifications';
@Component({
selector: 'app-root',
template: `<div>
<button ejs-button cssClass='e-btn e-control e-info' (click)="infoToast($event)">Info Message</button>
<button ejs-button cssClass='e-btn e-control e-success' (click)="successToast($event)">Success Message</button>
<button ejs-button cssClass='e-btn e-control e-warning' (click)="warningToast($event)">Warning Message</button>
<button ejs-button cssClass='e-btn e-control e-danger' (click)="dangerToast($event)">Danger Message</button>
</div>
<br/>
<div style="text-align: center;">
<button ejs-button cssClass='e-btn e-control' (click)="hideToast($event)">Hide All</button>
</div>`
})
export class AppComponent {
public toastObj;
public infoToast(): void {
toastObj = ToastUtility.show('Please read the comments carefully', 'Information', 20000);
}
public successToast(): void {
toastObj = ToastUtility.show('Your message has been sent successfully', 'Success', 20000);
}
public warningToast(): void {
toastObj = ToastUtility.show('There was a problem with your network connection', 'Warning', 20000);
}
public dangerToast(): void {
toastObj = ToastUtility.show('A problem has been occurred while submitting the data', 'Error', 20000);
}
public hideToast(): void {
toastObj.hide('All');
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ToastModule } from '@syncfusion/ej2-angular-notifications';
import { ButtonModule, CheckBoxModule , RadioButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ToastModule, ButtonModule, CheckBoxModule , RadioButtonModule, DropDownListModule, DatePickerModule
],
declarations: [AppComponent ],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Syncfusion Angular Toast Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Toolbar Controls" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/material.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="index.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<app-root>
<div id='loader'>LOADING....</div>
</app-root>
<script id="template_toast_ele" type="text/x-template">
<div id='template_toast' style="display: none">
<div class="horizontal-align">
<div class='toast-content'>
<div class='toast-title'>
Weekend Alarm
</div>
<div class='toast-message'> With traffic, its likely to take 45 minutes to get to jenny's 24th Birthday Bash at Hillside Bar, 454 E.
Olive Way by 10:00PM </div>
</div>
</div>
<img src="https://ej2.syncfusion.com/demos/src/toast/resource/map.jpg" width="100%" height="70%">
</div>
</script>
</body>
</html>/* csslint ignore:start */
#container {
margin: 25px;
}
#elementToastTime .e-toast {
width: 500px;
height: 147px;
}
#elementToastTime {
text-align: center;
}
#elementToastTime img {
width: 100px;
height: 100px;
border-radius: 50%;
}
#elementToastTime .e-toast-message {
width: inherit;
}
#sample_container {
margin: 10px;
}
body>#element .e-toast {
width: 400px !important;
}
#template_toast .horizontal-align {
margin: 10px 0;
}
#template_toast .horizontal-align .toast-content .toast-message {
opacity: 0.4;
}
#template_toast .horizontal-align .toast-content {
display: inline-flex;
flex: 1;
flex-direction: column;
margin-left: 10px;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.progress {
height: 20px;
position: relative;
margin: 20px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.progress span {
background-color: #f0a3a3;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
display: block;
height: 100%;
border-radius: 10px;
width: 50%;
position: relative;
overflow: hidden;
}
.progress span::after {
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 50px 50px;
-webkit-animation: moveAnimate 2s linear infinite;
overflow: hidden;
}
@-webkit-keyframes moveAnimate {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
/* csslint ignore:end */The utility function can be called using the ToastModel as argument to show the toast where all the properties in the ToastModel like any events, position, close icon, action buttons, etc. can be used in the ToastUtility.show.
import { Component, ViewChild } from '@angular/core';
import { closest} from '@syncfusion/ej2-base';
import { ToastUtility } from '@syncfusion/ej2-notifications';
@Component({
selector: 'app-root',
template: `<div style="text-align: center;">
<button ejs-button cssClass='e-btn e-control' (click)="showToast($event)">Show Toast</button>
</div>`
})
export class AppComponent {
public toastObj;
public showToast(): void {
toastObj = ToastUtility.show({
title: 'Toast Title',
content: 'Toast shown using utility function with ToastModel',
timeOut: 20000,
position: { X: 'Right', Y: 'Bottom' },
showCloseButton: true,
click: this.toastClick.bind(this),
buttons: [{
model: { content: 'Close' }, click: this.toastClose.bind(this)
}]
});
}
public toastClose(): void {
toastObj.hide();
}
public toastClick(): void {
console.log('Toast click event is triggered');
}
}import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ToastModule } from '@syncfusion/ej2-angular-notifications';
import { ButtonModule, CheckBoxModule , RadioButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DropDownListModule } from '@syncfusion/ej2-angular-dropdowns';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, ToastModule, ButtonModule, CheckBoxModule , RadioButtonModule, DropDownListModule, DatePickerModule
],
declarations: [AppComponent ],
bootstrap: [AppComponent]
})
export class AppModule { }import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js"></script>
<title>Syncfusion Angular Toast Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript Toolbar Controls" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.4.38/material.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="index.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<app-root>
<div id='loader'>LOADING....</div>
</app-root>
<script id="template_toast_ele" type="text/x-template">
<div id='template_toast' style="display: none">
<div class="horizontal-align">
<div class='toast-content'>
<div class='toast-title'>
Weekend Alarm
</div>
<div class='toast-message'> With traffic, its likely to take 45 minutes to get to jenny's 24th Birthday Bash at Hillside Bar, 454 E.
Olive Way by 10:00PM </div>
</div>
</div>
<img src="https://ej2.syncfusion.com/demos/src/toast/resource/map.jpg" width="100%" height="70%">
</div>
</script>
</body>
</html>/* csslint ignore:start */
#container {
margin: 25px;
}
#elementToastTime .e-toast {
width: 500px;
height: 147px;
}
#elementToastTime {
text-align: center;
}
#elementToastTime img {
width: 100px;
height: 100px;
border-radius: 50%;
}
#elementToastTime .e-toast-message {
width: inherit;
}
#sample_container {
margin: 10px;
}
body>#element .e-toast {
width: 400px !important;
}
#template_toast .horizontal-align {
margin: 10px 0;
}
#template_toast .horizontal-align .toast-content .toast-message {
opacity: 0.4;
}
#template_toast .horizontal-align .toast-content {
display: inline-flex;
flex: 1;
flex-direction: column;
margin-left: 10px;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.progress {
height: 20px;
position: relative;
margin: 20px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.progress span {
background-color: #f0a3a3;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
display: block;
height: 100%;
border-radius: 10px;
width: 50%;
position: relative;
overflow: hidden;
}
.progress span::after {
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-size: 50px 50px;
-webkit-animation: moveAnimate 2s linear infinite;
overflow: hidden;
}
@-webkit-keyframes moveAnimate {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
/* csslint ignore:end */