Syncfusion AI Assistant

How can I help you?

Customize mobile toolbar in Angular PDF Viewer

17 Apr 20263 minutes to read

Overview

This how-to explains how to enable the desktop toolbar on mobile devices running the Syncfusion Angular PDF Viewer, and how to preserve touch scrolling when the desktop toolbar is used.

Prerequisites

  • EJ2 Angular PDF Viewer installed and added in your Angular project.
  • For standalone mode: a valid resourceUrl hosting the PDF Viewer assets.
  • For server-backed mode: a working serviceUrl endpoint.

Steps

Step 1: Enable desktop toolbar on mobile: set enableDesktopMode to true on PDF Viewer.

Step 2: (Optional, recommended) Disable text-selection to preserve smooth touch scrolling: set enableTextSelection to false.

Step 3: Inject the ToolbarService and other services required by your toolbar features via providers array.

Example:

import { Component } from '@angular/core';
import { PdfViewerModule, ToolbarService, MagnificationService, NavigationService, AnnotationService, LinkAnnotationService,
  ThumbnailViewService, BookmarkViewService, TextSelectionService, TextSearchService, FormFieldsService, FormDesignerService,
  PrintService, PageOrganizerService } 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,
    PrintService, PageOrganizerService
  ],
  template: `<ejs-pdfviewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    [enableDesktopMode]="true"
    [enableTextSelection]="false"
    style="height:640px;width:100%;display:block">
  </ejs-pdfviewer>`
})
export class AppComponent {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resource: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
}
import { Component } from '@angular/core';
import { PdfViewerModule, ToolbarService, MagnificationService, NavigationService, AnnotationService, LinkAnnotationService,
  ThumbnailViewService, BookmarkViewService, TextSelectionService, TextSearchService, FormFieldsService, FormDesignerService,
  PrintService, PageOrganizerService } 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,
    PrintService, PageOrganizerService
  ],
  template: `<ejs-pdfviewer
    id="pdfViewer"
    [documentPath]="document"
    [serviceUrl]="service"
    [enableDesktopMode]="true"
    [enableTextSelection]="false"
    style="height:640px;width:100%;display:block">
  </ejs-pdfviewer>`
})
export class AppComponent {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
}

Troubleshooting

  • Print option not visible on mobile: set enableDesktopMode to true; otherwise the mobile toolbar omits Print.
  • Touch scrolling is jerky after enabling desktop toolbar: set enableTextSelection to false to avoid text-selection capturing touch events.
  • Missing assets or broken UI: confirm resourceUrl points to the correct version of the ej2-pdfviewer-lib and is reachable from the device.
  • Server errors in server-backed mode: verify serviceUrl CORS configuration and that the back end is running.