Set item wise custom template in Angular Toolbar component

18 Oct 20253 minutes to read

The Angular Toolbar component supports adding template commands using the template property, enabling integration of custom controls as toolbar items. The template property accepts HTML content as either a string literal or a query selector reference, providing flexibility for various implementation approaches.

Template configuration allows embedding interactive elements like checkboxes, dropdowns, input controls, or even other components within toolbar items. This capability extends the toolbar’s functionality beyond standard buttons and separators, enabling rich user interface scenarios.

As string

The HTML element tag can be given as a string for the template property. This approach is suitable for simple HTML structures and inline content. The following example demonstrates rendering a checkbox as an HTML template within a toolbar item:

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

As selector

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

template: "#Template"
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations'
import { TooltipModule } from '@syncfusion/ej2-angular-popups'



import { Component, ViewChild } from '@angular/core';

@Component({
imports: [
         ToolbarModule, TooltipModule
    ],


standalone: true,
    selector: 'app-container',
    template: `
         <button id='Template' class='e-btn'>Template</button>
        <ejs-toolbar>
          <e-items>
             <e-item text='Cut'></e-item>
             <e-item type='Separator'></e-item>
             <e-item text='Paste' prefixIcon = 'e-paste-icon'></e-item>
             <e-item type='Separator'></e-item>
             <e-item [template]='templateEle'></e-item>
             <e-item text='Undo'></e-item>
             <e-item text='Redo'></e-item>
             <e-item [template]='templateEleId'></e-item>
          </e-items>
        </ejs-toolbar>
        `
})

export class AppComponent {
    @ViewChild('element') element?: any;
    public templateEle: any = "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>";
    public templateEleId: any = '#Template';
    ngAfterViewInit() {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));