How to render other components in Toolbar using Angular template in Angular Toolbar

26 Sep 20263 minutes to read

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

Define an ng-template block as a sibling of the <ejs-toolbar> with a template reference variable, then reference it from the Angular Toolbar item through the [template] input. The ng-template is not placed inside the e-item tag; the e-item only references the template by name:

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';
bootstrapApplication(AppComponent).catch((err) => console.error(err));