Syncfusion AI Assistant

How can I help you?

Customize the Form Designer Toolbar in Angular PDF Viewer

17 Apr 20265 minutes to read

Overview

This guide shows how to show or hide the form designer toolbar, and how to configure which tools appear and their order.

Outcome: a working Angular example customizing the form designer toolbar.

Prerequisites

Steps

1. Show or hide Form Designer toolbar at initialization

Set the enableFormDesigner property on PDF Viewer instance to true or false to control initial visibility.

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"
               [enableFormDesigner]="true">
  </ejs-pdfviewer>`
})
export class AppComponent {
  public documentPath: string = 'https://cdn.syncfusion.com/content/pdf/formdesigner.pdf';
  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
}

2. Show or hide form designer toolbar at runtime

Use the enableFormDesigner API on the viewer’s instance on a custom method to toggle form designer visibility at runtime.

  • TS
    • this.pdfViewerObj.enableFormDesigner = true;

    3. Show or hide form designer toolbar items

    Use formDesignerToolbarItems and supply an ordered array of FormDesignerToolbarItem names.

    <ejs-pdfviewer
  [toolbarSettings]="toolbarSettings">
</ejs-pdfviewer>

    Complete example:

    Complete example with runtime toggle

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule, CommonModule],
  providers: [
    ToolbarService, MagnificationService, NavigationService, AnnotationService, LinkAnnotationService,
    ThumbnailViewService, BookmarkViewService, TextSelectionService, TextSearchService, FormFieldsService, FormDesignerService
  ],
  template: `<div>
    <button (click)="hideFormDesignerToolbar()"> Form Designer Toolbar</button>
    <ejs-pdfviewer #pdfviewer
                   id="PdfViewer"
                   style="height:500px;width:100%;"
                   [documentPath]="documentPath"
                   [resourceUrl]="resourceUrl"
                   [toolbarSettings]="toolbarSettings"
                   [enableFormDesigner]="show">
    </ejs-pdfviewer>
  </div>`
})
export class AppComponent {
  @ViewChild('pdfviewer')
  public pdfViewerObj!: PdfViewerComponent;
  
  public show: boolean = true;
  public documentPath: string = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
  public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
  
  public toolbarSettings: any = {
    formDesignerToolbarItems: [
      'TextboxTool', 'RadioButtonTool', 'CheckBoxTool',
      'DropdownTool', 'ListboxTool', 'DrawSignatureTool', 'DeleteTool'
    ]
  };
  
  hideFormDesignerToolbar(): void {
    this.show = !this.show;
    this.pdfViewerObj.enableFormDesigner = this.show;
  }
}

    Expected result

    • The form designer toolbar appears (or is hidden) according to enableFormDesigner.
    • Only the listed tools appear.

    Troubleshooting

    • Toolbar or form designer tools do not appear.