Syncfusion AI Assistant

How can I help you?

Customize Primary Toolbar in Angular PDF Viewer

17 Apr 20265 minutes to read

Overview

This guide explains how to show or hide the primary toolbar, remove default items, and add custom toolbar items.

Outcome: Working Angular example customizing the primary toolbar.

Prerequisites

Steps

1. Show or hide primary toolbar at initialization

Set enableToolbar to false to hide the built-in toolbar.

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  providers: [
    ToolbarService, MagnificationService, NavigationService, AnnotationService, LinkAnnotationService,
    ThumbnailViewService, BookmarkViewService, TextSelectionService, TextSearchService, FormFieldsService, FormDesignerService
  ],
  template: `<ejs-pdfviewer id="PdfViewer"
    style="height:500px;width:100%;"
    [documentPath]="documentPath"
    [resourceUrl]="resourceUrl"
    [enableToolbar]="false">
  </ejs-pdfviewer>`
})
export class AppComponent {
  public documentPath: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
}

2. Show or hide primary toolbar at runtime

Use the viewer’s showToolbar() method to show or hide dynamically.

// with a ViewChild reference named pdfViewerObj
this.pdfViewerObj.toolbar.showToolbar(false);

3. Show or hide primary toolbar items

Provide the toolbarItems array with the exact set and order of items you want to show. Any item omitted is hidden.

  • TS
    • <ejs-pdfviewer
  [toolbarSettings]="{ toolbarItems: ['OpenOption', 'DownloadOption', 'PrintOption', 'MagnificationTool'] }">
</ejs-pdfviewer>

    4. Add a custom primary toolbar item

    Add a custom item by including an object in toolbarItems and handling its action via toolbarClick. The following example shows adding a simple custom button at initialization.

  • TS
    • const customItems = [
  'OpenOption',
  {
    id: 'custom_btn',
    text: 'Fit to Width',
    align: 'Center'
  },
  'DownloadOption'
];
<ejs-pdfviewer [toolbarSettings]="{ toolbarItems: customItems }" (toolbarClick)="onToolbarClick($event)"></ejs-pdfviewer>

    Complete example:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule, CommonModule],
  providers: [
    ToolbarService, MagnificationService, NavigationService, AnnotationService, LinkAnnotationService,
    ThumbnailViewService, BookmarkViewService, TextSelectionService, TextSearchService, FormFieldsService, FormDesignerService,
    PageOrganizerService
  ],
  template: `<div>
    <button (click)="hideToolbar()"> toolbar</button>
    <ejs-pdfviewer #pdfviewer
      id="PdfViewer"
      style="height:500px;width:100%;"
      [documentPath]="documentPath"
      [resourceUrl]="resourceUrl"
      [toolbarSettings]="{ toolbarItems: toolbarItems }"
      (toolbarClick)="onToolbarClick($event)">
    </ejs-pdfviewer>
  </div>`
})
export class AppComponent {
  @ViewChild('pdfviewer')
  public pdfViewerObj!: PdfViewerComponent;

  public showTool: boolean = true;
  public documentPath: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public toolbarItems: any[] = [
    'OpenOption',
    {
      id: 'custom_btn',
      text: 'Fit to Width',
      align: 'Center'
    },
    'DownloadOption'
  ];

  hideToolbar(): void {
    this.showTool = !this.showTool;
    this.pdfViewerObj.toolbar.showToolbar(this.showTool);
  }

  onToolbarClick(event: ToolbarClickEventArgs): void {
    if (event.item && event.item.id === 'custom_btn') {
      this.pdfViewerObj.magnification.fitToWidth();
    }
  }
}

    Expected result

    • The primary toolbar shows only the items you list in toolbarItems.
    • Clicking the Hide toolbar / Show toolbar button calls showToolbar() and hides or shows the toolbar at runtime.
    • Clicking the custom Fit to Width button calls fitToWidth() method.

    Troubleshooting

    • Toolbar still shows all default items.