Add link to toolbar item in Angular Toolbar component

22 Sep 20253 minutes to read

The Angular Toolbar component supports adding interactive links within toolbar items using Angular ng-template. This approach enables you to embed anchor elements or routing links directly into toolbar items while maintaining full control over their behavior and styling.

To implement links in toolbar items, use the ng-template directive inside the e-item tag with the #template attribute. The template attribute is mandatory for Angular to properly render the custom template content within the toolbar item.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'




import { Component } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
         ToolbarModule
    ],


standalone: true,
    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 {

}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));