Render components in Angular Toolbar using templates

22 Sep 20253 minutes to read

The Angular Toolbar component supports embedding other Angular components directly within toolbar items using Angular ng-template directives. This template-based approach enables integration of complex UI elements with full functionality, including dropdowns, input controls, buttons, and custom components as toolbar items.

The ng-template directive must be placed inside each e-item tag with the #template attribute, which serves as the mandatory template reference variable for rendering the embedded content. This approach maintains the component’s lifecycle, event handling, and data binding capabilities within the toolbar context.

import { NgModule } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { BrowserModule } from '@angular/platform-browser'
import { ToolbarAllModule } from '@syncfusion/ej2-angular-navigations'
import { DatePickerAllModule } from '@syncfusion/ej2-angular-calendars'
import { ButtonAllModule  } from '@syncfusion/ej2-angular-buttons'
import { NumericTextBoxAllModule } from '@syncfusion/ej2-angular-inputs'




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

@Component({
imports: [
        FormsModule,
        ToolbarAllModule,
        
        DatePickerAllModule,
        NumericTextBoxAllModule,
        ButtonAllModule 
    ],


standalone: true,
    selector: 'app-container',
    template: ` <ejs-toolbar>
          <e-items>
           <e-item >
            <ng-template #template>
               <ejs-numerictextbox value="10"></ejs-numerictextbox>
            </ng-template>
            </e-item>
             <e-item >
            <ng-template #template>
                <ejs-datepicker></ejs-datepicker>
            </ng-template>
            </e-item>
             <e-item text='Cut'></e-item>
             <e-item text='Copy'></e-item>
             <e-item text='Paste'></e-item>
             <e-item type='Separator'></e-item>
             <e-item text='Bold'></e-item>
             <e-item text='Italic'></e-item>
             <e-item text='Underline'></e-item>
          </e-items>
        </ejs-toolbar>`
})

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