Search results

Template

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"
Source
Preview
index.tsx
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 {
    this.toastInstance.show();
  }

  public toastShow() {
    this.toastInstance.show();
  }

  public render() {
    return (
      <div>
        <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)} />
      </div>
    );
  }
}
ReactDOM.render(<ReactApp />, document.getElementById('element'));

See Also