How to show/hide download and open toolbar item in Angular PDF Viewer?

Description

This article explains how to dynamically show or hide the Download and Open toolbar items in the Syncfusion® Angular PDF Viewer using checkboxes. This feature is useful when you want to give users control over which toolbar options are visible, or when you need to restrict access to certain actions based on user roles or application state.

Solution

The Angular PDF Viewer provides a customizable toolbarSettings property that allows developers to define which toolbar items should be displayed. By binding this property to a dynamic list and updating it based on checkbox selections, you can control the visibility of toolbar items like Download and Open at runtime.

Prerequisites

Before implementing this feature, ensure the following:

Syncfusion PDF Viewer Setup: The Syncfusion PDF Viewer should be installed and configured in your Angular project. Refer to the Getting Started guide if needed.
Basic Angular Knowledge: Familiarity with Angular components and lifecycle hooks will help in understanding the implementation.

Code Snippets

`app.component.html`

<!-- Style to add top margin to the control section -->
<style>
  .control-section {
    margin-top: 100px;
  }
</style>

<!-- Main container for the PDF Viewer and checkbox controls -->
<div class="control-section">
  <div class="content-wrapper">
    <!-- Checkbox controls to toggle toolbar items -->
    <div class="checkbox-container">
      <label>
        <!-- Checkbox to toggle 'Download' toolbar item -->
        <input type="checkbox" [(ngModel)]="downloadEnabled" (change)="onCheckbox1Change($event)">
        Download
      </label>
      <label>
        <!-- Checkbox to toggle 'Open' toolbar item -->
        <input type="checkbox" [(ngModel)]="openEnabled" (change)="onCheckbox2Change($event)">
        Open
      </label>
    </div>

    <!-- Syncfusion PDF Viewer component -->
    <ejs-pdfviewer
      #pdfviewer
      id="pdfViewer"
      [documentPath]="document"
      [resourceUrl]="resource"
      style="height:640px;display:block"
      [toolbarSettings]="toolbarSettings">
    </ejs-pdfviewer>
  </div>
</div>

`app.component.ts`

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  encapsulation: ViewEncapsulation.None,
  providers: [
    // Injecting required services for PDF Viewer functionality
    LinkAnnotationService, BookmarkViewService, MagnificationService,
    ThumbnailViewService, ToolbarService, NavigationService,
    TextSearchService, TextSelectionService, PrintService,
    AnnotationService, FormFieldsService, FormDesignerService, PageOrganizerService
  ],
  styleUrls: ['app.component.css'],
  standalone: true,
  imports: [FormsModule, SwitchModule, PdfViewerModule],
})
export class AppComponent {
  // Reference to the PDF Viewer component
  @ViewChild('pdfviewer') public pdfviewerControl: PdfViewerComponent | undefined;

  // PDF document path and resource URL
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resource: string = 'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib';

  // Initial toolbar items to be displayed
  public toolbarItems: string[] = [
    'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool',
    'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption',
    'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool',
    'CommentTool', 'SubmitForm'
  ];

  // Toolbar settings configuration
  public toolbarSettings = { showTooltip: true, toolbarItems: [...this.toolbarItems] };

  // Checkbox model bindings
  public downloadEnabled = true;
  public openEnabled = true;

  // Handler for 'Download' checkbox change
  public onCheckbox1Change(event: any): void {
    this.toggleToolbarItem('DownloadOption', event.target.checked);
  }

  // Handler for 'Open' checkbox change
  public onCheckbox2Change(event: any): void {
    this.toggleToolbarItem('OpenOption', event.target.checked);
  }

  // Method to toggle toolbar items based on checkbox state
  private toggleToolbarItem(item: string, show: boolean): void {
    const index = this.toolbarItems.indexOf(item);

    // Add item if not present and checkbox is checked
    if (show && index === -1) {
      this.toolbarItems.push(item);
    }
    // Remove item if present and checkbox is unchecked
    else if (!show && index !== -1) {
      this.toolbarItems.splice(index, 1);
    }

    // Update toolbar settings and rebind PDF Viewer
    this.toolbarSettings = {
      showTooltip: true,
      toolbarItems: [...this.toolbarItems]
    };

    // Refresh the PDF Viewer with updated toolbar
    this.pdfviewerControl?.dataBind();
    this.pdfviewerControl?.load(this.document, '');
  }
}

Key Features Used

Dynamic Toolbar Configuration: The toolbarSettings property is updated at runtime to reflect the current state of the checkboxes.
Two-Way Binding with Checkboxes: Angular’s [(ngModel)] is used to bind checkbox states to component properties.
Real-Time Toolbar Update: The PDF Viewer is reloaded with updated toolbar settings to reflect changes immediately.

Sample Link

You can find the full sample in our GitHub repository.

Conclusion

I hope you enjoyed learning how to show/hide download and open toolbar item in Angular PDF Viewer. This feature enhances user experience by allowing flexible toolbar customization based on user preferences or application logic, enabling more dynamic and interactive document workflows.

You can refer to Angular PDF Viewer feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular PDF Viewer Example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)