Syncfusion AI Assistant

How can I help you?

Customize the Annotation Toolbar in Angular PDF Viewer

17 Apr 20267 minutes to read

Overview

This guide shows how to show or hide the annotation toolbar and how to choose which tools appear and their order.

Outcome: A working Angular example that toggles the annotation toolbar and uses annotationToolbarItems to customize the toolbar.

Prerequisites

Steps

1. Show or hide the annotation toolbar

Use the showAnnotationToolbar method on the viewer toolbar to control visibility.

import { Component, ViewChild } from '@angular/core';
import {
  PdfViewerComponent, PdfViewerModule, LinkAnnotationService,
  BookmarkViewService, MagnificationService,ThumbnailViewService,
  ToolbarService, NavigationService, TextSearchService, 
  TextSelectionService, PrintService, FormDesignerService,
  FormFieldsService, AnnotationService,
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <div class="content-wrapper">
      <button (click)="hideToolbar()" style="margin-bottom: 10px;">
         Annotation Toolbar
      </button>
      <ejs-pdfviewer
        #pdfViewer
        id="pdfViewer"
        [documentPath]="document"
        [resourceUrl]="resource"
        style="height:calc(100vh - 50px); display:block"
      >
      </ejs-pdfviewer>
    </div>
  `,
  providers: [
    LinkAnnotationService, BookmarkViewService, MagnificationService,
    ThumbnailViewService, ToolbarService, NavigationService,
    TextSearchService, TextSelectionService, PrintService,
    AnnotationService, FormDesignerService, FormFieldsService,
  ],
})
export class AppComponent {
  @ViewChild('pdfViewer')
  public pdfViewer?: PdfViewerComponent;

  public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
  public resource: string = 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
  public show: boolean = true;

  hideToolbar(): void {
    if (this.pdfViewer && this.pdfViewer.toolbar) {
      this.pdfViewer.toolbar.showAnnotationToolbar(this.show);
      this.show = !this.show;
    }
  }
}

2. Show or hide annotation toolbar items

Use annotationToolbarItems with a list of AnnotationToolbarItem values. The toolbar shows only items in this list.

import { Component } from '@angular/core';
import {
  PdfViewerComponent, PdfViewerModule, LinkAnnotationService,
  BookmarkViewService, MagnificationService, ThumbnailViewService,
  ToolbarService, NavigationService, TextSearchService,
  TextSelectionService, PrintService, FormDesignerService,
  FormFieldsService, AnnotationService,
  AnnotationToolbarItem,
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <div class="content-wrapper">
      <ejs-pdfviewer
        id="pdfViewer"
        [documentPath]="document"
        [resourceUrl]="resource"
        [toolbarSettings]="toolbarSettings"
        style="height:calc(100vh); display:block"
      >
      </ejs-pdfviewer>
    </div>
  `,
  providers: [
    LinkAnnotationService, BookmarkViewService, MagnificationService,
    ThumbnailViewService, ToolbarService, NavigationService,
    TextSearchService, TextSelectionService, PrintService,
    AnnotationService, FormDesignerService,
    FormFieldsService,
  ],
})
export class AppComponent {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resource: string = 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';

  public annotationToolbarItems: AnnotationToolbarItem[] = [
    'HighlightTool',
    'UnderlineTool',
    'StrikethroughTool',
    'ColorEditTool',
    'OpacityEditTool',
    'AnnotationDeleteTool',
    'CommentPanelTool',
  ];

  public toolbarSettings = {
    annotationToolbarItems: this.annotationToolbarItems,
  };
}

Complete example

The following is a complete, runnable example. It wires a toggle button and a viewer with a custom annotation toolbar list.

import { Component, ViewChild } from '@angular/core';
import {
  PdfViewerComponent, PdfViewerModule, LinkAnnotationService,
  BookmarkViewService, MagnificationService, ThumbnailViewService,
  ToolbarService, NavigationService, TextSearchService,
  TextSelectionService, PrintService, FormDesignerService,
  FormFieldsService, AnnotationService, 
  AnnotationToolbarItem,
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <div class="content-wrapper">
      <button (click)="hideToolbar()" style="margin-bottom: 10px;">
         Annotation Toolbar
      </button>
      <ejs-pdfviewer
        #pdfViewer
        id="pdfViewer"
        [documentPath]="document"
        [resourceUrl]="resource"
        [toolbarSettings]="toolbarSettings"
        style="height:calc(100vh - 50px); display:block"
      >
      </ejs-pdfviewer>
    </div>
  `,
  providers: [
    LinkAnnotationService, BookmarkViewService, MagnificationService,
    ThumbnailViewService, ToolbarService, NavigationService,
    TextSearchService, TextSelectionService, PrintService,
    AnnotationService, FormDesignerService,
    FormFieldsService,
  ],
})
export class AppComponent {
  @ViewChild('pdfViewer')
  public pdfViewer?: PdfViewerComponent;

  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resource: string = 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
  public show: boolean = true;

  public annotationToolbarItems: AnnotationToolbarItem[] = [
    'HighlightTool',
    'UnderlineTool',
    'StrikethroughTool',
    'ColorEditTool',
    'OpacityEditTool',
    'AnnotationDeleteTool',
    'CommentPanelTool',
  ];

  public toolbarSettings = {
    annotationToolbarItems: this.annotationToolbarItems,
  };

  hideToolbar(): void {
    if (this.pdfViewer && this.pdfViewer.toolbar) {
      this.pdfViewer.toolbar.showAnnotationToolbar(this.show);
      this.show = !this.show;
    }
  }
}

Troubleshooting