983156: Updated Comments in app.component.ts

Author: SF4524LogeshKumar

How to/Dynamically show or hide the Download and Open toolbar items using checkboxes/src/app/app.component.ts

@@ -1,82 +1,83 @@
-import { Component, ViewEncapsulation, OnInit,ViewChild} from '@angular/core';
-import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService, AnnotationService, FormFieldsService, FormDesignerService, PageOrganizerService,PdfViewerModule, TextSelectionStartEventArgs, AnnotationSelectEventArgs } from '@syncfusion/ej2-angular-pdfviewer';
+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 { ClickEventArgs } from '@syncfusion/ej2-buttons';
 import { FormsModule } from '@angular/forms';
 
-
-
-/**
- * Default PdfViewer Controller
- */
 @Component({
-    selector: 'app-root',
-    templateUrl: 'app.component.html',
-    encapsulation: ViewEncapsulation.None,
-    // tslint:disable-next-line:max-line-length
-    providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService,
-        TextSearchService, TextSelectionService, PrintService, AnnotationService, FormFieldsService, FormDesignerService,PageOrganizerService],
-    styleUrls: ['app.component.css'],
-    standalone: true,
-    imports: [
-        FormsModule,
-        SwitchModule,
-        PdfViewerModule,
-        
-    ],
+  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 {
-    @ViewChild('pdfviewer')
-    public pdfviewerControl: PdfViewerComponent | undefined;
-    @ViewChild('switch')
-    public switch: SwitchComponent | undefined;
-    
-    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";
-    public toolbarItems: string[] = [
-        'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool',
-        'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption',
-        'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool',
-        'CommentTool', 'SubmitForm'
-    ];
-    public toolbarSettings = { showTooltip: true, toolbarItems: [...this.toolbarItems] };
-    
-public downloadEnabled = true;
-public openEnabled = true;
+  // Reference to the PDF Viewer component
+  @ViewChild('pdfviewer') public pdfviewerControl: PdfViewerComponent | undefined;
 
-    ngOnInit(): void {
-        // ngOnInit function
-    }
-    public onCheckbox1Change(event: any): void {
-        this.toggleToolbarItem('DownloadOption', event.target.checked);
-    }
+  // 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';
 
-    public onCheckbox2Change(event: any): void {
-        this.toggleToolbarItem('OpenOption', event.target.checked);
-    }
+  // 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] };
 
-    private toggleToolbarItem(item: string, show: boolean): void {
-        const index = this.toolbarItems.indexOf(item);
-    
-        if (show && index === -1) {
-            this.toolbarItems.push(item);
-        } else if (!show && index !== -1) {
-            this.toolbarItems.splice(index, 1);
-        }
-    
-        // Update toolbarSettings
-        this.toolbarSettings = {
-            showTooltip: true,
-            toolbarItems: [...this.toolbarItems]
-        };
-    
-        // Apply new settings and reload the viewer
-        this.toolbarSettings = this.toolbarSettings;
-        this.pdfviewerControl?.dataBind();
-        this.pdfviewerControl?.load(this.document, ""); // ✅ This forces toolbar to re-render
+  // 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, '');
+  }
+}