Toolbar supports to add link by using the template configuration. The Toolbar can be rendered by item based collection and by HTML elements. Template property can be given as the HTML element that is either a string or a query selector.
The template property also allows getting template content through query selector. Here, anchor element ‘ID’ attribute is specified in the template.
template: "#AnchorTemplate"ej.base.enableRipple(true);
//Initialize Toolbar component
var toolbar = new ej.navigations.Toolbar({
items: [
{ text: "Cut" },
{ text: "Copy" },
{ type: "Separator" },
{ text: "Paste" },
{ type: "Separator" },
{ template: '#AnchorTemplate' }
]
});
//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.2.3/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.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
<div id="AnchorTemplate">
<a target="_blank" href="https://ej2.syncfusion.com/documentation/toolbar/getting-started/">Anchor Toolbar Link</a>
</div>
<br><br>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>