Search results

Set item-wise custom template in Angular Toolbar component

20 Apr 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"
Copied to clipboard
import { Component, ViewChild } from '@angular/core';

    selector: 'app-container',
    template: `
         <button id='Template' class='e-btn'>Template</button>
             <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>

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

 * Module
    imports: [
        BrowserModule, ToolbarModule
    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';