Search results


Template property can be given as the HTML element that is either a string or a query selector.

The HTML element tag can be given as a string for the template property.

template: "<div>Toast Content</div>"

The template property also allows getting template content through query selector. Here, element ‘ID’ attribute is specified in the template.

template: "#Template"
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class ReactApp extends React.Component<{}, {}> {
  public toastInstance: ToastComponent;
  public position = { X: 'Right', Y: 'Bottom' };
  public template = (document.getElementById("template_toast_ele") as HTMLElement).innerHTML;

  public toastCreated(): void {;

  public toastShow() {;

  public render() {
    return (
        <ButtonComponent cssClass="e-primary" id='template_toast' onClick={this.toastShow = this.toastShow.bind(this)}> Show Toast </ButtonComponent>
        <ToastComponent id='template_toast' ref={toast => this.toastInstance = toast!} template={this.template} position={this.position} extendedTimeout={0} timeOut='120000' created={this.toastCreated = this.toastCreated.bind(this)} />
ReactDOM.render(<ReactApp />, document.getElementById('element'));

See Also