How to set command customization in Angular Toolbar

31 Aug 20263 minutes to read

The htmlAttributes property of the Toolbar item enables comprehensive customization by setting HTML attributes such as id, class, style, and role for individual toolbar commands.

When applying style attributes through htmlAttributes, any existing style attributes with the same names will be replaced with the new values. The class attribute behaves differently: new CSS classes are appended to the existing classes rather than replacing them, ensuring that previously applied styles are preserved. For example, an existing class="e-toolbar-item e-active" combined with htmlAttributes: { class: 'my-class' } results in class="e-toolbar-item e-active my-class".

The Toolbar item cssClass property is the simpler choice for adding one or more CSS classes. Use cssClass when only CSS classes are required, and use htmlAttributes when you need any of the other HTML attributes (id, style, role, etc.). When both are set on the same item, htmlAttributes classes are appended after cssClass.

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 { Component, ViewChild } from '@angular/core';
import { ToolbarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [
         ToolbarModule, TooltipModule
    ],


standalone: true,
    selector: 'app-container',
    template: `
        <ejs-toolbar>
          <e-items>
             <e-item text='Bold'  [htmlAttributes] = 'boldAttribute'></e-item>
             <e-item text='Italic' [htmlAttributes] = 'italicAttribute'></e-item>
             <e-item text='Underline' [htmlAttributes] = 'underAttribute'></e-item>
             <e-item type='Separator'></e-item>
             <e-item text='Uppercase' cssClass = 'e-txt-casing'></e-item>
          </e-items>
        </ejs-toolbar>
        `
})

export class AppComponent {
    @ViewChild('element') element?: any;
     public boldAttribute: any = { 'class': 'custom_bold', 'id': 'itemId' };
     public italicAttribute: any = { 'class': 'custom_italic' };
     public underAttribute: any = { 'class': 'custom_underline' };
    ngAfterViewInit() {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));