Search results

Add dynamic template

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

Source
Preview
index.js
index.html
ej.base.enableRipple(true);

//Initialize Toast component

var toast = new ej.notifications.Toast({
    timeOut: 0,
    target: document.body,
    position: { X: 'Right', Y: 'Bottom' },
    click: onClick
});

var toastFlag: number = 0;

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

//Render initialized Toast component

toast.appendTo('#element');
toast.show(toasts[toastFlag]);
++toastFlag;

var ele = document.createElement("button");
ele.textContent = "Show Toast"
ele.classList.add('e-btn');
ele.id = "show_toast";
document.body.appendChild(ele);

ele.onclick = function () {
  toast.show(toasts[toastFlag]);
  ++toastFlag;
  if (toastFlag === (toasts.length)) {
      toastFlag = 0;
  }
};

function onClick(e ) {
 e.clickToClose = true;
}
<!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="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    
    
<script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
        <br><br>
        <div id="result"></div>
        <div id="templateToast" style="display: none;color:red"> System affected by virus !!! </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>