Toast Services in EJ2 TypeScript Toast

4 Sep 20267 minutes to read

The Toast component provides a built-in utility function to render the toast with minimal code. The utility function renders the toast without the need of a container element in the DOM where the toast is appended, so the toast can now be rendered on the go. The following are the options to render the toast using the utility function.

Show Toast with predefined types

The Toast component supports 4 types of predefined toasts 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, and Warning.
timeOut Specifies the Toast display time duration on the page in milliseconds. Once the time expires, the Toast message will be removed. Setting 0 as the time out value displays the Toast on the page until it is closed manually. 
import { ToastUtility, Toast } from '@syncfusion/ej2-notifications';

let toastObj: Toast;
document.getElementById('info_Toast').onclick = function () {
    toastObj = ToastUtility.show('Please read the comments carefully', 'Information', 20000);
};
document.getElementById('success_Toast').onclick = function () {
    toastObj = ToastUtility.show('Your message has been sent successfully', 'Success', 20000);
};
document.getElementById('error_Toast').onclick = function () {
    toastObj = ToastUtility.show('A problem has been occurred while submitting the data', 'Error', 20000);
};
document.getElementById('warning_Toast').onclick = function () {
    toastObj = ToastUtility.show('There was a problem with your network connection', 'Warning', 20000);
};
document.getElementById('hide_Toast').onclick = function () {
   toastObj.hide('All');
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Toast</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="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div>
            <button class="e-btn e-control e-info" id="info_Toast"> Info Message </button>
            <button class="e-btn e-control e-success" id="success_Toast"> Success Message </button>
            <button class="e-btn e-control e-warning" id="warning_Toast"> Warning Message </button>
            <button class="e-btn e-control e-danger" id="error_Toast"> Danger Message </button>
        </div>
        <br>
        <div style="text-align: center;">
            <button class="e-btn e-control" id="hide_Toast"> Hide All </button>
        </div>
    </div>
</body>
</html>

Show Toast with ToastModel

The utility function can be called using the ToastModel as an 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 { ToastUtility, Toast } from '@syncfusion/ej2-notifications';

let toastObj: Toast;
document.getElementById('show_Toast').onclick = (): 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: toastClick,
        buttons:  [{
            model: { content: 'Close' }, click: toastClose
        }]
    });
};

function toastClick() {
    console.log('Toast click event triggered');
}

function toastClose() {
    toastObj.hide();
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Toast</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="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div style="text-align: center;">
            <button class="e-btn e-control" id="show_Toast">Show Toast</button>
        </div>
    </div>
</body>
</html>