Config in EJ2 TypeScript Toast
4 Sep 202614 minutes to read
This section explains the steps required to customize the appearance of the Toast using built-in APIs.
Title and content template
The Toast can be created with a notification message. The message contains the title and content of the toasts. The title and content are adaptable in any resolution.
The Title or Content property can be given as HTML element/element ID to a string that can be displayed as a toast.
import {Toast} from '@syncfusion/ej2-notifications';
import { enableRipple } 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',
position: { X: "Center" }
});
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>Specifying custom target
By default, the Toast is rendered in the document body. The target position for Toast rendering can be changed using the target property. Based on the target, the position will be updated.
Close button
By default, the showCloseButton is not enabled. It can be enabled by setting the value to true. Before the Toast expires, this button can be used to close or destroy toasts manually.
Progress bar
By default, the showProgressBar is not enabled. If enabled, it visually indicates when the Toast will expire. Based on the timeOut property, the progress bar will appear.
Progress bar direction
By default, the progressDirection is set to “Rtl” and it will appear in the right-to-left direction. The progressDirection can be changed to “Ltr” to make it appear in the left-to-right direction.
Newest on top
By default, the newly created toasts are appended next to existing toasts. The sequence can be changed, inserting the new toast before the existing toasts by enabling the newestOnTop property.
The following sample demonstrates the combination of the target, showCloseButton, showProgressBar, and newestOnTop properties in the Toast.
import {Toast} from '@syncfusion/ej2-notifications';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
let toast: Toast = new Toast({
title: 'File Downloading',
content: '<div class="progress"><span style="width: 80%"></span></div>',
showCloseButton: true,
target: '#toast_target',
position: { X: "Center" }
newestOnTop: true,
showProgressBar: true,
progressDirection: "Ltr"
});
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>
<style>
#toast_target {
height: 200px;
}
</style>
</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='toast_target'></div>
</div>
</body>
</html>Width and height
The dimensions of the Toast can be set using the width and height properties. This will individually set all toasts. Toasts with different custom dimensions can be created.
By default, the Toast is rendered with a 300px width and auto height.
In mobile devices, the default width of the Toast takes ‘100%’ width of the page.
When the Toast width is set as ‘100%’, the Toast occupies the full width and will be displayed at the top or bottom based on the positionYproperty.
Both the width and height properties allow setting pixels/numbers/percentage. The number value is considered as pixels.
import {Toast} from '@syncfusion/ej2-notifications';
import { enableRipple } from '@syncfusion/ej2-base';
import { RadioButton, ChangeEventArgs as CheckBoxChange, CheckBox, ChangeEventArgs} from '@syncfusion/ej2-buttons';
enableRipple(true);
let toast: Toast = new Toast({
title: 'Matt sent you a friend request',
content: 'You have a new friend request yet to accept',
position: { X: "Center", Y: "Bottom" },
width: 400,
height: 150,
});
toast.appendTo('#element');
toast.show();
let timeDelay = 500;
let radioButton: RadioButton = new RadioButton({ label: 'Top', name: 'toast', value: 'Target', change: checkboxChange });
radioButton.appendTo('#topAlign');
let radioButton2 = new RadioButton({ label: 'Bottom', name: 'toast', value: 'Global', checked: true, change: checkboxChange1 });
radioButton2.appendTo('#bottomAlign');
let checkBoxObj: CheckBox = new CheckBox({ label: '100% Width', change: onChange });
checkBoxObj.appendTo('#fullWidth');
function onChange(e: ChangeEventArgs): void {
if (e.checked) {
toast.hide();
toast.width = "100%";
toast.title="";
toast.content="<div class='e-custom'>Take a look at our next generation <b>Javascript</b> <a href='https://ej2.syncfusion.com/home/index.html' target='_blank'>LEARN MORE</a></div>";
toastShow(timeDelay);
} else {
toast.hide();
toast.width= 300;
toast.title= 'Matt sent you a friend request',
toast.content='You have a new friend request yet to accept',
toastShow(timeDelay);
}
}
function checkboxChange(e: CheckBoxChange): void {
if (e.event.target.checked) {
toast.position.Y = "Top";
toast.hide();
toastShow(timeDelay);
}
}
function checkboxChange1(e: CheckBoxChange): void {
if (e.event.target.checked) {
toast.position.Y = "Bottom";
toast.hide();
toastShow(timeDelay);
}
}
function toastShow(timeOutDelay: number): void {
setTimeout(
() => {
toast.show();
}, timeOutDelay);
}
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="https://cdn.syncfusion.com/ej2/34.2.2/material.css" rel="stylesheet" />
<link href="index.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 id='element'></div>
<div class='row'> <button class="e-btn" id="show_toast"> Show Toast</button> </div>
<div class='row' style="padding-top: 20px" id= "toast_pos_target">
<table>
<tr>
<td>
<div style='padding:25px 0 0 0;'>
<input id="topAlign" type="radio">
</div>
</td>
<td>
<div style='padding:25px 0 0 0;'>
<input id="bottomAlign" type="radio">
</div>
</td>
</tr>
<tr>
<td>
<div style='padding:25px 0 0 0;'>
<input id="fullWidth" type="checkbox">
</div>
</td>
</tr>
</table>
</div>
<br/><br/>
<div id='result'></div>
</div>
</body>
</html>