--- title: "Easy Steps to Create a Read-Only Angular PDF Viewer" published_at: "2022-12-12T12:02:23+00:00" modified_at: "2026-07-01T12:39:54+00:00" url: "https://www.syncfusion.com/blogs/post/easy-steps-to-create-a-read-only-angular-pdf-viewer" excerpt: "PDF documents are usually created to keep the information in the document secure. So, most PDF creators don’t want the document’s content to be changed. But there are PDF editors available in the market that allow PDF content to be..." taxonomy_category: - "Angular" - "File Formats" - "PDF viewer" - "Web" taxonomy_post_tag: - "Angular" - "File Formats" - "PDF Viewer" - "Web Development" --- # Easy Steps to Create a Read-Only Angular PDF Viewer [Johnson Manohar](https://www.syncfusion.com/blogs/author/johnsonmonoharm) ![Easy Steps to Create a Read-Only Angular PDF Viewer](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Easy-Steps-to-Create-a-Read-Only-Angular-PDF-Viewer-3.png) PDF documents are usually created to keep the information in the document secure. So, most PDF creators don’t want the document’s content to be changed. But there are PDF editors available in the market that allow PDF content to be edited. To protect your PDF document from being edited, you must use a read-only PDF Viewer to display it. A read-only PDF Viewer will only display the PDF document and it from editing, copying, printing, and downloading. This blog will walk you through the steps to create a read-only PDF viewer in an Angular app by customizing the features of Syncfusion’s [Angular PDF Viewer](https://www.syncfusion.com/angular-components/angular-pdf-viewer) . ## Creating a read-only Angular PDF Viewer If you are new to using the Angular PDF Viewer, please go through our documentation on [getting started with it](https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started/) . You can make the Angular PDF Viewer read-only by: - [Disabling the editing features.](#disabling-the-editing-features) - [Removing the editing tools from the toolbar.](#removing-the-editing-tools-from-the-toolbar) - [Removing the toolbar.](#removing-the-toolbar) Add Seamless PDF Viewing to Angular Apps Embed a fast, secure PDF viewer into your Angular apps with Syncfusion Angular PDF Viewer SDK. Display documents accurately, navigate pages, search text, annotate PDFs, fill forms, and handle large files with smooth performance. [Add Angular PDF Viewer](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) ### Disable the editing features Annotations and form fields are the major editing modules in the PDF Viewer. With these features, any PDF document can be modified. The following steps show you how to disable the annotation and form fields modules in PDF Viewer. ![Angular PDF Viewer with Annotation and Form Fields Enabled](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Angular-PDF-Viewer-with-Annotation-and-Form-Fields-Enabled.png) Angular PDF Viewer with Annotation and Form Fields Enabled **Step 1:** Inject only the required modules in the ** app.component.ts** file. It will load only the specified modules. Since we do not need the annotation and form fields modules, don’t inject them. ``` import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService, } from '@syncfusion/ej2-angular-pdfviewer'; ``` **Note:** For more details about the modules split up, refer to the [supported modules](https://ej2.syncfusion.com/angular/documentation/pdfviewer/feature-module/) documentation. **Step 2:** Register only the needed services. Here, we are going to exclude the ** AnnotationService** and ** FormDesignerService** to keep users from adding or deleting annotations and form fields in the PDF document. ``` @Component({ selector: 'app-root', templateUrl: 'app.component.html', encapsulation: ViewEncapsulation.None, providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService ]}) ``` ![Angular PDF Viewer with Annotations and Form Fields Disabled](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Angular-PDF-Viewer-with-Annotations-and-Form-Fields-Disabled.png) Angular PDF Viewer with Annotations and Form Fields Disabled **Note:** If you want to disable the print and download options in the PDF Viewer, you can exclude those services, too. For more details, refer to the StackBlitz [sample on creating a read-only PDF Viewer](https://stackblitz.com/edit/angular-slvaep?file=app.component.ts,app.component.html) that locks adding and deleting annotations and form fields. ### Removing the editing tools from the toolbar The next way to create a read-only PDF viewer is by hiding the toolbar items that allow adding and deleting annotations and form fields. To achieve this, include only the required toolbar items in the **AppComponent** class. This demo will show only these items: Open, Page Navigation, Magnification, Print, and Download. The following code in the **app.component.ts** hides the unwanted toolbar items. ``` export class AppComponent { public service: string = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer'; public document: string = 'PDF_Succinctly.pdf'; public toolbarSettings = { showTooltip: true, toolbarItems: [ 'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PrintOption', 'DownloadOption', ], }; ``` ![Angular PDF Viewer with Required Toolbar Items](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Angular-PDF-Viewer-with-Required-Toolbar-Items.png) Angular PDF Viewer with Required Toolbar Items For more details, refer to the StackBlitz [sample on creating a read-only PDF Viewer by hiding toolbar items](https://stackblitz.com/edit/angular-9ayiag-2eknf3?file=app.component.html,app.component.ts,index.html) . **Note:** Even print and download options can be excluded. ### Hide the toolbars Sometimes, your web application may need to allow people to view the PDF document without offering a toolbar or menu options. We can achieve such a requirement by simply hiding the primary toolbar. Adding the following code in the **app.component.html** file will hide the primary toolbar. ```
``` ![Angular PDF Viewer without a Toolbar](https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Angular-PDF-Viewer-without-a-Toolbar.png) Angular PDF Viewer without a Toolbar For more details, refer to the StackBlitz [sample on creating a read-only PDF Viewer by hiding the toolbar](https://stackblitz.com/edit/angular-wxanbc-5jcamm?file=app.component.ts) . ## GitHub samples For better understanding, we have committed the source for this project in the [Blazor PDF Viewer examples](https://github.com/SyncfusionExamples/blazor-pdf-viewer-examples) , [EJ2 PDF Viewer web services](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices) , [Angular PDF Viewer examples](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples) , [React PDF Viewer examples](https://github.com/SyncfusionExamples/react-pdf-viewer-examples) , and [Vue PDF Viewer examples](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples) on our GitHub repository. [https://www.syncfusion.com/downloads/angular](https://www.syncfusion.com/downloads/angular) ## Conclusion With [Syncfusion’s Angular PDF Viewer](https://www.syncfusion.com/angular-components/angular-pdf-viewer) , creating a read-only PDF Viewer is as easy. Along with the annotations and form fields, you can disable any feature in the PDF Viewer by not injecting its module. You can exclude modules like thumbnails, bookmarks, print, download, navigations, magnification, and undo and redo operations. Please let us know in the comments below if you have any questions about these features. You can also contact us through our [support forum](https://www.syncfusion.com/forums) , [support portal](https://support.syncfusion.com) , or [feedback portal](https://www.syncfusion.com/feedback/pdf) . We are happy to assist you! ## Related blogs - [How to Load and View PDF Files in an Angular App](https://www.syncfusion.com/blogs/post/load-and-view-pdf-files-in-an-angular-app.aspx) - [Introducing the New Angular Image Editor Component](https://www.syncfusion.com/blogs/post/introducing-the-new-angular-image-editor-component.aspx) - [Introducing the New Angular Mention Component](https://www.syncfusion.com/blogs/post/angular-mention-component.aspx) - [Top 7 Features of Angular 14](https://www.syncfusion.com/blogs/post/top-7-features-of-angular-14.aspx)