Set item wise custom template in Angular Toolbar component

4 Apr 20233 minutes to read

The Toolbar supports adding template commands using the template property. Template property can be given as the HTML element that is either a string or a query selector.

As string

The HTML element tag can be given as a string for the template property. Here, the checkbox is rendered as a HTML template.

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"

app.component.ts

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

@Component({
    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;
    public templateEle: any = "<div><input type='checkbox' id='check1' checked=''>Accept</input></div>";
    public templateEleId: any = '#Template';
    ngAfterViewInit() {
    }
}

app.module.ts

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 { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, ToolbarModule, TooltipModule
    ],
    declarations: [AppComponent ],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);