Getting Started with EJ2 JavaScript Toast

4 Sep 202613 minutes to read

This section explains the steps required to create a simple Essential^® JS 2 Toast control and demonstrates the basic usage of the Toast control in a JavaScript application.

Dependencies

The list of dependencies required to use the Toast component in an application is given below:

|-- @syncfusion/ej2-notifications
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-buttons

Setup for local environment

Refer to the following steps to set up the local environment.

Step 1: Create a root folder named my-app for the application.

Step 2: Create a my-app/resources folder to store local scripts and styles files.

Step 3: Open Visual Studio Code and create my-app/index.js and my-app/index.html files to initialize the Essential^® JS 2 Toast control.

Adding Syncfusion^® resources

The Essential^® JS 2 Toast control can be initialized by using either of the following ways.

Using local script and style.
Using CDN link for script and style.

Using local script and style references in a HTML page

Step 1: Create an app folder myapp for Essential^® JS 2 JavaScript components.

Step 2: The global scripts and styles are available in the Essential Studio^® JavaScript (Essential^® JS 2) build installed location.

Syntax:

Script: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Styles: **(installed location)**/Syncfusion/Essential Studio/{RELEASE_VERSION}/Essential JS 2/{PACKAGE_NAME}/styles/material.css

Example:

Script: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-notifications/dist/global/ej2-notifications.min.js

Styles: C:/Program Files (x86)/Syncfusion/Essential Studio/15.4.30/Essential JS 2/ej2-notifications/styles/material.css

Step 3: Create a folder myapp/resources and copy/paste the global scripts and styles from the above installed location to myapp/resources location.

Step 4: Create a HTML page (index.html) in myapp location and add the Essential^® JS 2 script and style references.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
          <title>Essential JS2 Toast</title>

          <!-- Essential JS 2 Toast's material theme -->
          <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
          <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
          <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" />
          <link href="https://cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet" type="text/css" />

          <!-- Essential JS 2 Toast's global script -->
          <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js"
               type="text/javascript"></script>
          <script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js"
               type="text/javascript"></script>
          <script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js"
               type="text/javascript"></script>
          <script src="https://cdn.syncfusion.com/ej2/ej2-notifications/dist/global/ej2-notifications.min.js"
               type="text/javascript"></script>
       </head>
       <body>
       </body>
  </html>

Step 5: Now, add the Toast element and initialize the Essential^® JS 2 Toast component in the index.html using the following code.

Initialize the Toast using the show method

The Toast control is rendered by appending it to the target element and calling the show method to display the toast.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
               <title>Essential JS2 Toast</title>

               <!-- Essential JS 2 Toast's material theme -->
               <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
               <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
               <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" />
               <link href="https://cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet" type="text/css" />

               <!-- Essential JS 2 Toast's global script -->
               <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js"
                    type="text/javascript"></script>
               <script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js"
                    type="text/javascript"></script>
               <script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js"
                    type="text/javascript"></script>
               <script src="https://cdn.syncfusion.com/ej2/ej2-notifications/dist/global/ej2-notifications.min.js"
                    type="text/javascript"></script>
          </head>
       <body>
            <!-- Add the HTML <div> element  -->
             <div id="element"></div>
            <script>
//Initialize Toast component
                var toast = new ej.notifications.Toast({
                    title: 'Matt sent you a friend request',
                    content: 'You have a new friend request yet to accept',
                    target: document.body
                });

//Render initialized Toast component
                toast.appendTo('#element');
                toast.show();
            </script>
       </body>
  </html>

Step 6: Now, run the index.html in a web browser, it will render the Essential^® JS 2 Toast component.

Using CDN link for script and style reference

Step 1: Create an app folder myapp for the Essential^® JS 2 JavaScript components.

Step 2: The Essential^® JS 2 component’s global scripts and styles are already hosted in the below CDN link formats.

Syntax:

Script: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js

Styles: http://cdn.syncfusion.com/ej2/{PACKAGE_NAME}/styles/material.css

Example:

Script: http://cdn.syncfusion.com/ej2/ej2-notifications/dist/global/ej2-notifications.min.js

Styles: http://cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css

Step 3: Create a HTML page (index.html) in the myapp location and add the CDN link references. Now, add the Toast element and initialize the Essential^® JS 2 Toast component in the index.html using the following code.

<!DOCTYPE html>
  <html xmlns="http://www.w3.org/1999/xhtml">
       <head>
          <title>Essential JS2 Toast</title>

          <!-- Essential JS 2 Toast's material theme -->
          <link href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" type="text/css" />
          <link href="https://cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" type="text/css" />
          <link href="https://cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" type="text/css" />
          <link href="https://cdn.syncfusion.com/ej2/ej2-notifications/styles/material.css" rel="stylesheet" type="text/css" />

          <!-- Essential JS 2 Toast's global script -->
          <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js"
               type="text/javascript"></script>
          <script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js"
               type="text/javascript"></script>
          <script src="https://cdn.syncfusion.com/ej2/ej2-popups/dist/global/ej2-popups.min.js"
               type="text/javascript"></script>
          <script src="https://cdn.syncfusion.com/ej2/ej2-notifications/dist/global/ej2-notifications.min.js"
               type="text/javascript"></script>
     </head>
     <body>
          <!-- Add the HTML <div> element  -->
          <div id="element"></div>
     <script>
          var toast = new ej.notifications.Toast({
               title: 'Matt sent you a friend request',
               content: 'You have a new friend request yet to accept',
               target: document.body
          });

          //Render initialized Toast component
          toast.appendTo('#element');
          toast.show();
     </script>
</body>
</html>

Step 4: Now, run the index.html in a web browser, it will render the Essential^® JS 2 Toast component.

The output will be as follows:

In the previous example, the #element is the id of the HTML element in a page to which the toast is initialized.

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

//Initialize Toast component
var toast = new ej.notifications.Toast({
    title: 'Matt sent you a friend request',
    content: 'You have a new friend request yet to accept',
    target: document.body,
    timeOut: 0
});

//Render initialized Toast component
toast.appendTo('#element');
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://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <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>


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

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Getting Started with EJ2 JavaScript Toast

Dependencies

Setup for local environment

Adding Syncfusion^® resources

Using local script and style references in a HTML page

Initialize the Toast using the show method

Using CDN link for script and style reference

See Also

Getting Started with EJ2 JavaScript Toast

Dependencies

Setup for local environment

Adding Syncfusion® resources

Using local script and style references in a HTML page

Initialize the Toast using the show method

Using CDN link for script and style reference

See Also

Adding Syncfusion^® resources