Search results

Add dynamic template in JavaScript Toast control

08 May 2023 / 1 minute to read

Toast supports to change templates dynamically with displaying in multiple toasts. You can change the toast properties while calling in the show method.

Copied to clipboard
import {Toast, ToastClickEventArgs } from '@syncfusion/ej2-notifications';
import { enableRipple } from '@syncfusion/ej2-base';


let toast: Toast = new Toast({
    position: { X: 'Right', Y: 'Bottom' }
    click: onClick

let toastFlag: number = 0;
let toasts = [ { template: '2 Mail has received'},{ template: 'User Guest Logged in'},{ template: 'Logging in as Guest'},{ template: 'Ticket has reserved '},{ template: '#templateToast' }];


document.getElementById('show_toast').onclick = () => {[toastFlag]);
  if (toastFlag === (toasts.length)) {
      toastFlag = 0;

function onClick(e: ToastClickEventArgs ): void {
  e.clickToClose = true;
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

    <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="//" rel="stylesheet" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>

    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class='row'> <button class="e-btn" id="show_toast"> Show Toast</button> </div>
        <div id='element'></div>
        <div id='result'></div>
        <div id='templateToast' style="display: none;color:red"> System affected by virus !!! </div>