Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions Document-Processing-toc.html
Original file line number Diff line number Diff line change
Expand Up @@ -996,6 +996,7 @@
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/pagerenderstarted-pagerendercompleted">PageRenderInitiate and PageRenderComplete event</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/open-bookmark">Open and Close Bookmark pane programmatically</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/lock-formfield-in-a-document">Locking Form Fields in a PDF document</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/lock-annotation-in-a-document">Locking annotations in a PDF document</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/signatureselect-signatureunselect">SignatureSelect and SignatureUnselect event</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/download-start-event">Controlling File Downloads</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/min-max-zoom">Minimum and Maximum Zoom Properties</a></li>
Expand All @@ -1020,6 +1021,7 @@
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/enable-text-selection">Dynamically Enable or Disable Text Selection</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/show-hide-annotation">Show and Hide Annotations</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/load-document-after-resources-loaded">Load document after resources loaded</a></li>
<li><a href="/document-processing/pdf/pdf-viewer/angular/how-to/show-pop-up-after-completion-of-export-form-fields">Show pop-up after completion of export form fields</a></li>
</ul>
</li>
<li>Troubleshooting
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Add Rectangle Annotation via Text Search | Syncfusion
title: Add Rectangle Annotations via Text Search | Syncfusion
description: Learn to add rectangle annotations using text search bounds in the Angular PDF Viewer component, including initialization and search controls.
platform: document-processing
control: PDF Viewer
Expand All @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

# Add Rectangle Annotations via Text Search in Angular PDF Viewer

A concise guide that demonstrates how to add rectangle annotations at highlighted text search results in the Angular PDF Viewer. The guide explains where to wire the callback, required services, and quick troubleshooting steps.
Learn how to add rectangle annotations at highlighted text search results in the Angular PDF Viewer by wiring a callback to the `textSearchHighlight` event.

## Steps to add rectangle annotations on search result highlight

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,17 @@ description: Learn how to include custom headers in PDF Viewer AJAX requests usi
platform: document-processing
control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---

# Add header values in the Angular PDF Viewer

Use the ajaxHeaders property in the PDF Viewers [ajaxRequestSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#ajaxrequestsettings) to include custom headers with each AJAX request.
Use the ajaxHeaders property in the PDF Viewer's [ajaxRequestSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#ajaxrequestsettings) to include custom headers with each AJAX request.

Example: Add a custom Authorization header using `ajaxRequestSettings` in an Angular component
The following example adds a custom Authorization header using `ajaxRequestSettings` in an Angular component.

{% tabs %}
{% highlight ts tabtitle="index.ts" %}
{% highlight ts tabtitle="app.component.ts" %}
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import {
PdfViewerComponent,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,14 @@ description: Learn how to customize annotation selectors in the Angular PDF View
platform: document-processing
control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---

# Customize annotation selectors in Angular PDF Viewer
# Customize Annotation Selectors in Angular PDF Viewer

Use the [annotationSelectorSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#annotationselectorsettings) property to configure the appearance and behavior of annotation selectors. This includes selection handles and resizer (for example, handle shape and size), which determine how users interact with annotations during editing.
Use the [annotationSelectorSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#annotationselectorsettings) property to configure the appearance and behavior of annotation selectors. This includes the selection handles and the resizer (for example, the shape and size of the resizer handles), which determine how users interact with annotations during editing.

The example below changes the selector's resizer handle shape to circular and opens an existing annotation for editing. Setting `resizerShape = 'Circle'` updates the selector appearance to circular resizer handles; ensure an annotation exists before calling `editAnnotation` to avoid runtime errors.
The example below changes the selector's resizer handle shape to circular and opens an existing annotation for editing. Setting `resizerShape = 'Circle'` updates the selector appearance to circular resizer handles. Ensure an annotation exists before calling `editAnnotation` to avoid runtime errors.

Example: Customize the selector of a shape annotation

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,22 +9,22 @@ domainurl: ##DomainURL##
---


# Change author name using annotation settings in Angular PDF Viewer
# Change Author Name Using Annotation Settings in Angular PDF Viewer

The `annotationSettings` API provides a central way to configure properties that apply to all annotations in the viewer.

API name: annotationSettings

| Property Name | Data type & Default Value | Description |
| Property Name | Data type and Default Value | Description |
|---|---|---|
| author | String ("Guest") | Specifies the author of the annotation. |
| minWidth | Number (0) | Specifies the minimum width of the annotation. |
| maxWidth | Number (0) | Specifies the maximum width of the annotation. |
| minHeight | Number (0) | Specifies the minimum height of the annotation. |
| maxHeight | Number (0) | Specifies the maximum height of the annotation. |
| isLock | Boolean (false) | Specifies whether the annotation is locked. If true, the annotation cannot be selected. |
| isPrint | Boolean (true) | Specifies whether the annotation is included in print actions. |
| isDownload | Boolean (true) | Specifies whether the annotation is included in download actions. |
| skipPrint | Boolean (true) | Specifies whether the annotation is included in print actions. |
| skipDownload | Boolean (true) | Specifies whether the annotation is included in download actions. |
| Free Text Settings |
| allowOnlyTextInput | Boolean (false) | Specifies text-only mode for free text annotations. If true, moving or resizing is disabled. |

Expand Down Expand Up @@ -80,8 +80,8 @@ import { AnnotationService, AnnotationSettingsModel, BookmarkViewService, FormFi
`
})
export class AppComponent {
public serviceUrl = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
public docPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
public serviceUrl: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/';
public docPath: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
public annotationSettings: AnnotationSettingsModel = {
author: 'syncfusion', minHeight: 30, maxHeight: 500, minWidth: 30, maxWidth: 500, isLock: false, skipPrint: false, skipDownload: false
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Change selection border in Angular PDF Viewer component | Syncfusion
description: Learn here all about Change selection border in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
title: Change the selection border in Angular | Syncfusion
description: Learn how to change the selection border in the Syncfusion Angular PDF Viewer component using the annotationSelectorSettings property.
platform: document-processing
control: Change selection border
control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---

# Customize the selection border
# Change the selection border

The PDF Viewer library allows you to customize the annotations selection borders using the [**annotationSelectorSettings**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotationSelectorSettingsModel#annotationselectorsettingsmodel) Property.
The PDF Viewer library allows you to customize the annotations selection borders using the [**annotationSelectorSettings**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotationSelectorSettingsModel#annotationselectorsettingsmodel) property.

Recommended steps

Expand Down
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
layout: post
title: Configure annotation selector settings in Angular PDF Viewer | Syncfusion
title: Configure annotation selector settings in Angular | Syncfusion
description: Learn how to configure annotation selector settings in the Angular PDF Viewer using annotationSelectorSettings and related options.
platform: document-processing
control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---

# Configure Annotation Selector Settings
# Configure Annotation Selector Settings in Angular

### Annotation Selector Settings

Use the [annotationSelectorSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotationSelectorSettings/) property to customize the appearance and interaction behavior of the annotation selector in the Angular PDF Viewer UI.
Use the [annotationSelectorSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotationselectorsettings) property to customize the appearance and interaction behavior of the annotation selector in the Angular PDF Viewer UI.

### AnnotationSelectorSettingsModel

The [AnnotationSelectorSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotationSelectorSettingsModel/) defines selector appearance and behavior settings—such as border colors, resizer appearance, and selector line style—providing fine-grained control over how annotations are displayed and manipulated.
The [AnnotationSelectorSettingsModel](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotationselectorsettingsmodel) defines selector appearance and behavior settings—such as border colors, resizer appearance, and selector line style—providing fine-grained control over how annotations are displayed and manipulated.

Steps to configure annotation selector settings
Steps to configure annotation selector settings:

- Step 1: Create a PDF Viewer instance and initialize it.
- Step 2: Set the annotationSelectorSettings property to customize selector behavior.
Expand Down Expand Up @@ -152,7 +152,7 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}

#### Key properties
### Key properties

- selectionBorderColor: Sets the color for the border around selected annotations.
- resizerBorderColor: Sets the color for the border of the resizer handles.
Expand All @@ -161,7 +161,7 @@ export class AppComponent implements OnInit {
- selectionBorderThickness: Specifies the thickness of the selection border.
- resizerShape: Sets the shape of the resizer handles (for example, Circle or Square).
- selectorLineDashArray: Specifies the dash pattern for the selector line.
- resizerLocation: Determines where the resizers appear relative to the annotation (for example, Corners or Edges).
- resizerLocation: Determines where the resizer handles appear relative to the annotation (for example, Corners or Edges).
- resizerCursorType: Sets the cursor style when hovering over a resizer.

[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to)
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
---
layout: post
title: Supported PDF conformance levels | Syncfusion
description: Learn about the supported PDF/A and PDF/X conformance levels in the Angular PDF Viewer component.
title: Supported PDF conformance levels in Angular | Syncfusion
description: Learn about the supported PDF/A and PDF/X conformance levels in the Syncfusion Angular PDF Viewer component.
platform: document-processing
control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---

# supported PDF conformance in Anglar PDF Viewer component
# Supported PDF Conformance in an Angular PDF Viewer Component

The Angular PDF Viewer supports the following PDF/A and PDF/X conformance levels:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,17 @@ documentation: ug
domainurl: ##DomainURL##
---

# Control annotations visibility in PDF Viewer
# Control annotation visibility in Angular PDF Viewer

## Overview

This guide shows how to display annotations in the Angular PDF Viewer while preventing them from appearing in the saved/downloaded PDF.

## Steps to control annotation visibility

**Step 1:** Follow the steps in the getting-started guide (https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a basic PDF Viewer sample.
**Step 1:** Follow the steps in the [getting-started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a basic PDF Viewer sample.

**Step 2:** Add controls for annotation modification and downloading
**Step 2:** Add controls for annotation modification and downloading.

Add buttons in the component template to modify annotations and to trigger a download of the PDF.

Expand Down Expand Up @@ -182,7 +182,6 @@ save() {
{% endhighlight %}
{% endtabs %}


After performing these steps, annotations remain visible in the viewer but are hidden in the downloaded PDF.

[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to)
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
layout: post
title: Convert PDF Library bounds to PDF Viewer bounds | Syncfusion
title: Convert PDF Library bounds to Angular PDF Viewer bounds | Syncfusion
description: Learn how to convert PDF Library bounds into PDF Viewer bounds when exporting annotations, ensuring accurate placement in the Angular PDF Viewer.
platform: document-processing
control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---

# Convert PDF Library bounds to PDF Viewer bounds
# Convert PDF Library bounds to PDF Viewer bounds in Angular

When exporting annotations from the PDF Library, convert the annotation bounds into the PDF Viewer coordinate system so exported annotations appear at the correct position and scale in the viewer.

Steps to convert bounds values
Steps to convert bounds values:

**Step 1:** Initialize the PDF Viewer instance

Expand Down Expand Up @@ -86,7 +86,7 @@ Fetch the blob data and convert it into a JSON object.
}
```

**Conclusion**
## Conclusion

These steps convert PDF Library bounds values into PDF Viewer bounds values when exporting annotations as JSON, helping maintain accurate annotation placement.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ N> For Angular 17+, see the following links:
* [Create a Standalone PDF Viewer in Angular 17 and above with-no-standalone-flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-with-no-standalone-flag).
* [Create a Standalone PDF Viewer in Angular 17 and above without --no-standalone flag](./how-to/create-a-standalone-pdf-viewer-in-angular-17-and-above-without-no-standalone-flag).

## Setup Angular Environment
## Set Up Angular Environment

You can use the [`Angular CLI`](https://github.com/angular/angular-cli) to setup your Angular applications.
You can use the [`Angular CLI`](https://github.com/angular/angular-cli) to set up your Angular applications.
To install the latest Angular CLI globally use the following command.

```bash
Expand Down Expand Up @@ -162,7 +162,7 @@ View the sample in GitHub to [load PDF Viewer with local resources](https://gith

## Run the application

Use the following command to run the application in browser.
Use the following command to run the application in the browser.

```javascript
ng serve --open
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
layout: post
title: PDF Viewer in Angular 17+ with no-standalone | Syncfusion
description: Checkout and learn about Create a Standalone PDF Viewer in Angular 17 and above with --no-standalone flag of Syncfusion Essential JS 2 and more details.
description: Learn how to create a PDF Viewer in Angular 17 and above using the --no-standalone flag with Syncfusion Essential JS 2 and more details.
platform: document-processing
control: PDF Viewer
documentation: ug
Expand All @@ -12,9 +12,9 @@ domainurl: ##DomainURL##

This article describes the steps required to create a standalone Angular PDF Viewer for Angular 17 and later using the `--no-standalone` option.

## Setup Angular Environment
## Set up Angular Environment

You can use the [`Angular CLI`](https://github.com/angular/angular-cli) to setup your Angular applications.
You can use the [`Angular CLI`](https://github.com/angular/angular-cli) to set up your Angular applications.
To install the latest Angular CLI globally use the following command.

```bash
Expand Down Expand Up @@ -133,7 +133,7 @@ export class AppComponent implements OnInit {

Use the following command to run the application in the browser.

```javascript
```bash
ng serve --open
```

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ domainurl: ##DomainURL##

This section explains the steps required to create a simple Standalone Angular PDF Viewer in Angular 17 and above without --no-standalone flag.

## Setup Angular Environment
## Set up Angular Environment

Use the Angular CLI to create and manage Angular applications.
To install the latest Angular CLI globally use the following command.
Expand Down Expand Up @@ -50,7 +50,7 @@ On Windows, use an equivalent command or add an npm script to copy assets cross-

## Registering PDF Viewer Module and Adding PDF Viewer component

Import PDF Viewer module into Angular application from the package `@syncfusion/ej2-angular-pdfviewer` and Add the Angular PDF Viewer by using `<ejs-pdfviewer>` selector in `template` section of the `src/app/app.component.ts` file to render the PDF Viewer component.
Import PDF Viewer module into Angular application from the package `@syncfusion/ej2-angular-pdfviewer` and add the Angular PDF Viewer by using `<ejs-pdfviewer>` selector in `template` section of the `src/app/app.component.ts` file to render the PDF Viewer component.

```typescript

Expand Down Expand Up @@ -109,9 +109,9 @@ Add the Angular PDF Viewer component’s styles as given below in `src/styles.cs
```
## Run the application

Use the following command to run the application in browser.
Use the following command to run the application in the browser.

```javascript
```bash
ng serve --open
```

Expand Down
Loading