Search results

Show multiple toasts in various positions in JavaScript Toast control

06 Jun 2023 / 1 minute to read

By default, the positions of the new toasts are only updated after the visible toasts have been destroyed. If You need to display multiple toasts with different positions, initiate another toasts.

The following sample demonstrates adding multiple toasts in different positions.

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


let toast: Toast = new Toast({
    title: 'Warning !',
    content: 'There was a problem with your network connection.'
    position: { X: 'Right', Y: 'Bottom' }
    click: onClick

let toast1: Toast = new Toast({
    title: 'Success !',
    content: 'Your message has been sent successfully.'
    position: { X: 'Left', Y: 'Bottom' }
    click: onClick

document.getElementById('show_toast').onclick = () => {;

document.getElementById('show_toast1').onclick = () => {;

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 Right Position Toast</button> </div>
        <div class='row'> <button style="margin-left: 10px;" class="e-btn" id="show_toast1">Show Left Position Toast</button> </div>
        <div id='element'></div>
        <div id='element1'></div>