TimeOut in EJ2 TypeScript Toast

4 Sep 20266 minutes to read

The Toast expires based on the timeOut property. The toast lives until the time out is reached without any interaction; the time out value is considered in milliseconds.

  • The timeOut delay can be visually represented using the Progress Bar.

  • The extendedTimeOut property determines how long the toast should be displayed after it is hovered over.

The process can be terminated at any time by using the showCloseButton property to destroy the toast.

import {Toast} from '@syncfusion/ej2-notifications';
import { enableRipple, closest} from '@syncfusion/ej2-base';

enableRipple(true);
let toast: Toast = new Toast({
    title: 'Anjolie Stokes',
    content: '<p><img src="https://ej2.syncfusion.com/vue/demos/src/toast/resource/laura.png"></p>',
    position: { X: "Right", Y: "Bottom" },
    width: 230,
    height: 250,
        buttons : [{
        model: { content: "Ignore" }
    }, {
      model: { content: "reply" }
    }]
});
toast.appendTo('#elementToastTime');
toast.show();

document.getElementById('show_toast').onclick = () => {
  let value = parseInt(document.getElementById('toast_input_index').value)
  toast.show({timeOut: value});
}
<!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 class="e-float-input"><input class="e-input" id="toast_input_index" required="" value="0"><span class="e-float-line"></span><label class="e-float-text">Enter timeOut</label></div>
        <div class='row'> <button style="margin-top: 20px;" class="e-btn" id="show_toast"> Show Toast</button> </div>
        <div id='element'></div>
        <div id="elementToastTime"></div>
        <br/><br/>
        <div id='result'></div>
    </div>
</body>

</html>

Static toast

Auto hiding in a toast can be prevented, keeping it visible as static, by setting the timeOut property to zero (0).

import {Toast} from '@syncfusion/ej2-notifications';
import { enableRipple, closest} from '@syncfusion/ej2-base';

enableRipple(true);
let toast: Toast = new Toast({
    title: 'Matt sent you a friend request',
    content: 'You have a new friend request yet to accept',
    showCloseButton: true,
    position: { X: "Right" },
    timeOut: 0
});
toast.appendTo('#element');
toast.show();

document.getElementById('show_toast').onclick = () => {
    toast.show();
}
<!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 class='row'> <button class="e-btn" id="show_toast"> Show Toast</button> </div>
        <div id='element'></div>
        <br/><br/>
        <div id='result'></div>
        <div id='templateToast' style="display: none;color:red"> System affected by virus !!! </div>
    </div>
</body>

</html>

See Also