Easy Steps to Create a Read-Only Angular PDF Viewer
Tags: angular, pdf, webdev, productivity
Published: 2022-12-15 12:46:33

---
title: Easy Steps to Create a Read-Only Angular PDF Viewer
published: true
date: 2022-12-12 12:02:23 UTC
tags: angular, pdf, webdev, productivity
canonical_url: https://www.syncfusion.com/blogs/post/easy-steps-to-create-a-read-only-angular-pdf-viewer.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5e8pdjllhw5kzxs25z26.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 "Syncfusion 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/ "Getting started with Angular PDF Viewer").

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)

###<a name="disabling-the-editing-features">Disable the editing features</a>

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.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Angular-PDF-Viewer-with-Annotation-and-Form-Fields-Enabled.png" alt="Angular PDF Viewer with Annotation and Form Fields Enabled" style="width:100%">

  <figcaption>Angular PDF Viewer with Annotation and Form Fields Enabled</figcaption>

</figure>

**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.

```js
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/ "Feature Modules in Angular PDF Viewer documentation") 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.

```js
@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    encapsulation: ViewEncapsulation.None,
    providers: [
        LinkAnnotationService, 
        BookmarkViewService, 
        MagnificationService, 
        ThumbnailViewService, 
        ToolbarService, 
        NavigationService, 
        TextSearchService, 
        TextSelectionService, 
        PrintService
]})
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Angular-PDF-Viewer-with-Annotations-and-Form-Fields-Disabled.png" alt="Angular PDF Viewer with Annotations and Form Fields Disabled" style="width:100%">

  <figcaption>Angular PDF Viewer with Annotations and Form Fields Disabled</figcaption>

</figure>

**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 "Creating a read-only PDF Viewer with disabled editing features demo on Stackblitz") that locks adding and deleting annotations and form fields.

###<a name="removing-the-editing-tools-from-the-toolbar">Removing the editing tools from the toolbar</a>

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.

```js
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',
    ],
  };
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Angular-PDF-Viewer-with-Required-Toolbar-Items.png" alt="Angular PDF Viewer with Required Toolbar Items" style="width:100%">

  <figcaption>Angular PDF Viewer with Required Toolbar Items</figcaption>

</figure>

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 "Hiding toolbar items in read-only PDF Viewer demo on Stackblitz").

**Note:** Even print and download options can be excluded.

###<a name="removing-the-toolbar">Hide the toolbars</a>

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.

```html
<div class="control-section">
  <div class="content-wrapper">
    <ejs-pdfviewer
      id="pdfViewer"
      [serviceUrl]="service"

      [enableToolbar]="false" //hides the primary toolbar

      [documentPath]="document"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>
</div>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2022/12/Angular-PDF-Viewer-without-a-Toolbar.png" alt="Angular PDF Viewer without a Toolbar" style="width:100%">

  <figcaption>Angular PDF Viewer without a Toolbar</figcaption>

</figure>

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 "Demo: Creating a read-only PDF Viewer by hiding toolbar items").

## 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 "Syncfusion Blazor PDF Viewer GitHub demos"), [EJ2 PDF Viewer web services](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices "Syncfusion EJ2 PDF Viewer web services GitHub demos"), [Angular PDF Viewer examples](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples "Angular PDF Viewer GitHub demos"), [React PDF Viewer examples](https://github.com/SyncfusionExamples/react-pdf-viewer-examples "React PDF Viewer GitHub demos"), and [Vue PDF Viewer examples](https://github.com/SyncfusionExamples/vue-pdf-viewer-examples "Vue PDF Viewer GitHub demos") on our GitHub repository.

## Conclusion

With [Syncfusion’s Angular PDF Viewer](https://www.syncfusion.com/angular-components/angular-pdf-viewer "Syncfusion 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 "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/pdf "Syncfusion Feedback Portal"). 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 "Blog: How to Load and View PDF Files in an Angular App")
- [Introducing the New Angular Image Editor Component](https://www.syncfusion.com/blogs/post/introducing-the-new-angular-image-editor-component.aspx "Blog: Introducing the New Angular Image Editor Component")
- [Introducing the New Angular Mention Component](https://www.syncfusion.com/blogs/post/angular-mention-component.aspx "Blog: Introducing the New Angular Mention Component")
- [Top 7 Features of Angular 14](https://www.syncfusion.com/blogs/post/top-7-features-of-angular-14.aspx "Blog: Top 7 Features of Angular 14")