Search results

Toast

The Toast is a notification pop-up that showing on desired position which can provide an information to the user.

<div id="toast"/>
<script>
  var toastObj = new Toast();
  toastObj.appendTo("#toast");
</script>

Properties

animation

ToastAnimationSettingsModel

Specifies the animation configuration settings for showing and hiding the Toast.

    <div id="toast_default"></div>
import { Toast } from "@syncfusion/ej2-notifications";

let toastObj: Toast = new Toast({
  animation: {
    show: { effect: "FadeIn", duration: 600, easing: "linear" },
    hide: { effect: "FadeOut", duration: 600, easing: "linear" }
  }
});

toastObj.appendTo("#toast_default");
toastObj.show({
  title: "Toast",
  content: "Toast sample"
});

Defaults to { show: { effect: ‘FadeIn’, duration: 600, easing: ‘linear’ },hide: { effect: ‘FadeOut’, duration: 600, easing: ‘linear’ }}

buttons

ButtonModelPropsModel[]

Specifies the collection of Toast action buttons to be rendered with the given Button model properties and its click action handler.

    <div id="toast_default"></div>
import { Toast} from "@syncfusion/ej2-notifications";

let toastObj: Toast = new Toast({
  buttons: [{ model: { content:`Click`}
}]
});

toastObj.appendTo("#toast_default");
toastObj.show({ content: "Toast sample"
});

Defaults to [{}]

content

string | HTMLElement | Function

Specifies the content to be displayed on the Toast. Accepts selectors, string values and HTML elements.

Defaults to null

cssClass

string

Defines single/multiple classes (separated by space) to be used for customization of Toast.

Defaults to null

enableHtmlSanitizer

boolean

Defines whether to allow the cross-scripting site or not.

Defaults to true

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

extendedTimeout

number

Specifies the Toast display time duration after interacting with the Toast.

Defaults to 1000

height

string | number

Specifies the height of the Toast in pixels/number/percentage. Number value is considered as pixels.

Defaults to ‘auto’

icon

string

Defines CSS classes to specify an icon for the Toast which is to be displayed at top left corner of the Toast.

Defaults to null

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to

newestOnTop

boolean

Specifies the newly created Toast message display order while multiple toast’s are added to page one after another. By default, newly added Toast will be added after old Toast’s.

Defaults to true

position

ToastPositionModel

Specifies the position of the Toast message to be displayed within target container. In the case of multiple Toast display, new Toast position will not update on dynamic change of property values until the old Toast messages removed. X values are: Left , Right ,Center Y values are: Top , Bottom

    <div id="toast_default"></div>
import { Toast} from "@syncfusion/ej2-notifications";

let toastObj: Toast = new Toast({
position: { X: 'Right', Y: 'Top' },
content: "Toast sample"
});

toastObj.appendTo("#toast_default");
toastObj.show({});

Defaults to { X: “Left”, Y: “Top” }

progressDirection

ProgressDirectionType

Specifies whether to show the progress bar with left to right direction to denote the Toast message display timeout.

showCloseButton

boolean

Specifies whether to show the close button in Toast message to close the Toast.

Defaults to false

showProgressBar

boolean

Specifies whether to show the progress bar to denote the Toast message display timeout.

Defaults to false

target

HTMLElement | Element | string

Specifies the target container where the Toast to be displayed. Based on the target, the positions such as Left, Top will be applied to the Toast. The default value is null, which refers the document.body element.

Defaults to null

template

string | Function

Specifies the HTML element/element ID as a string that can be displayed as a Toast. The given template is taken as preference to render the Toast, even if the built-in properties such as title and content are defined.

    <div id="toast_default"></div>
     <script id="template_toast_ele" type="text/x-template"> <div>toast template</div></script>
import { Toast} from "@syncfusion/ej2-notifications";

let toastObj: Toast = new Toast({
  template: document.getElementById('template_toast_ele').innerHTML
});

toastObj.appendTo("#toast_default");
toastObj.show({});

Defaults to null

timeOut

number

Specifies the Toast display time duration on the page in milliseconds.

  • Once the time expires, Toast message will be removed.
  • Setting 0 as a time out value displays the Toast on the page until the user closes it manually.

Defaults to 5000

title

string | Function

Specifies the title to be displayed on the Toast. Accepts selectors, string values and HTML elements.

Defaults to null

width

string | number

Specifies the width of the Toast in pixels/numbers/percentage. Number value is considered as pixels. In mobile devices, default width is considered as 100%.

Defaults to ‘300’

Methods

addEventListener

Adds the handler to the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event
handler Function Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers, attributes and classes.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

hide

To Hide Toast element on a document. To Hide all toast element when passing ‘All’.

Parameter Type Description
element (optional) HTMLElement | Element | string To Hide Toast element on screen.

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter Type Description
eventName string A String that specifies the name of the event to remove
handler Function Specifies the function to remove

Returns void

show

To show Toast element on a document with the relative position.

Parameter Type Description
toastObj (optional) ToastModel To show Toast element on screen.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter Type Description
moduleList Function[] ?

Returns void

Events

beforeClose

EmitType<ToastBeforeCloseArgs>

Triggers the event before the toast close.

beforeOpen

EmitType<ToastBeforeOpenArgs>

Triggers the event before the toast shown.

beforeSanitizeHtml

EmitType<BeforeSanitizeHtmlArgs>

Event triggers before sanitize the value.

click

EmitType<ToastClickEventArgs>

The event will be fired while clicking on the Toast.

close

EmitType<ToastCloseArgs>

Trigger the event after the Toast hides.

created

EmitType<Event>

Triggers the event after the Toast gets created.

destroyed

EmitType<Event>

Triggers the event after the Toast gets destroyed.

open

EmitType<ToastOpenArgs>

Triggers the event after the Toast shown on the target container.