Search results

Set item-wise custom template in Angular Toolbar component

16 Sep 2021 / 1 minute 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.

Copied to clipboard
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.

Copied to clipboard
template: "#Template"
Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
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() {
    }
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

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