Search results

Customize toolbar in Angular DocumentEditor component

29 Sep 2022 / 2 minutes to read

How to customize existing toolbar in DocumentEditorContainer

Document Editor Container allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.

Copied to clipboard
import { Component, ViewChild } from '@angular/core';
import { ClickEventArgs } from '@syncfusion/ej2-navigations'
import { DocumentEditorContainerComponent, ToolbarService, CustomToolbarItemModel } from '@syncfusion/ej2-angular-documenteditor';

  selector: 'app-root',
  template: '<ejs-documenteditorcontainer [height]="600px" [toolbarItems]=items (toolbarClick)="onToolbarClick($event)" #documenteditor_default style="display:block;" [enableToolbar]=true></ejs-documenteditorcontainer>',
  styleUrls: ['./app.component.css'],
  providers: [ToolbarService]
export class AppComponent {
@ViewChild('documenteditor_default', { static: true })
container: DocumentEditorContainerComponent;
//Custom toolbat item.
public toolItem: CustomToolbarItemModel = {
      prefixIcon: "e-de-ctnr-lock",
      tooltipText: "Disable Image",
      text: "Disable Image",
      id: "Custom"
public items = [this.toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'Comments', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator', 'LocalClipboard', 'RestrictEditing'];
public onToolbarClick(args: ClickEventArgs): void {
    switch ( {
        case 'Custom':
            //Disable image toolbar item.
            this.container.toolbar.enableItems(4, false);

Note: Default value of toolbarItems is ['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'Separator', 'Find', 'Separator','Comments','TrackChanges','Separator', 'LocalClipboard', 'RestrictEditing','Separator','FormFields','UpdateFields'].