Set item wise custom template in EJ2 TypeScript Toolbar control

20 Dec 20242 minutes to read

The Toolbar supports adding template commands using the template property. The template property can be specified as an HTML element, either as a string or a query selector.

As a string

The HTML element tag can be specified as a string for the template property. Here, a checkbox is rendered as an HTML template.

template: "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>"

As a selector

The template property also allows retrieving template content through a query selector. Here, the button’s ‘ID’ attribute is specified in the template.

template: "#Template"
import {Toolbar} from '@syncfusion/ej2-navigations';
let toolbar: Toolbar = new 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" }
    ]
});
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="https://cdn.syncfusion.com/ej2/28.1.33/material.css" rel="stylesheet" />
    <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id='element'></div>
        <br/><br/>
        <button id='Template' class='e-btn'>Template</button>
    </div>
</body>

</html>