The Toolbar supports adding template commands using the template property. 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. Here, the checkbox is rendered as a HTML template.
template: "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>"The template property also allows getting template content through query selector. Here, checkbox ‘ID’ attribute is specified in the template.
template: "#Template"ej.base.enableRipple(true);
//Initialize Toolbar component
var toolbar = new ej.navigations.Toolbar({
items: [
{ text: "Cut" },
{ type: "Separator" },
{ text: "Paste" },
{ type: "Separator" },
{ template: "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>" },
{ text: "Undo" },
{ text: "Redo" },
{ template: "#Template" }
]
});
//Render initialized Toolbar component
toolbar.appendTo('#element');<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 Toolbar</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="//cdn.syncfusion.com/ej2/21.1.35/material.css" rel="stylesheet">
<link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
<br><br>
<button id="Template" class="e-btn">Template</button>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>