Search results

Add link to Toolbar Item in Angular Toolbar component

03 Dec 2021 / 1 minute to read

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.

Source
Preview
app.component.ts
index.css
index.html
Copied to clipboard
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 {

}
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}
Copied to clipboard
<!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/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>