You can add link inside Toolbar using Angular ng-template. We need to use ng-template inside the e-item tag with #template attribute, which is mandatory to render the template.
import { Component } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-container',
template: `
<ejs-toolbar>
<e-items>
<e-item text='Cut'></e-item>
<e-item text='Copy'></e-item>
<e-item type='Separator'></e-item>
<e-item text='Paste'></e-item>
<e-item type='Separator'></e-item>
<e-item >
<ng-template #template>
<div>
<a
target="_blank"
href="https://ej2.syncfusion.com/angular/documentation/toolbar/getting-started/"
>Anchor Toolbar Link</a
>
</div>
</ng-template>
</e-item>
</e-items>
</ejs-toolbar>
`
})
export class AppComponent {
}#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}<!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/20.1.57/material.css" rel="stylesheet" />
<link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<app-container>
<div id='loader'>LOADING....</div>
</app-container>
</body>
</html>