Skip to content

Commit 0bd5f7d

Browse files
BalajiLoganathanSF4826BalajiLoganathanSF4826
committed
1008844: Added angular 12 getting started docs
1 parent 24f6e2d commit 0bd5f7d

3 files changed

Lines changed: 244 additions & 0 deletions

File tree

‎Document-Processing/PDF/PDF-Viewer/angular/getting-started.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ N> For older versions of Angular, see the following links:
1818

1919
* [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).
2020
* [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).
21+
* [Create a Standalone PDF Viewer in Angular 12](./how-to/create-a-standalone-pdf-viewer-in-angular-12)
2122

2223
## Prerequisites
2324

‎Document-Processing/PDF/PDF-Viewer/angular/how-to-overview.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ The frequently asked questions in Essential<sup>&reg;</sup> PDF Viewer are liste
4545
* [Add custom fonts to the PDF Viewer using the PDF document](./how-to/custom-fonts)
4646
* [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)
4747
* [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)
48+
* [Create a Standalone PDF Viewer in Angular 12](./how-to/create-a-standalone-pdf-viewer-in-angular-12)
4849
* [Configure Annotation Selector Setting](./how-to/configure-annotation-selector-setting)
4950
* [Convert Pdf Library Bounds to Pdf viewer bounds](./how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds)
5051
* [Display Custom Stamp items in Custom Stamp](./how-to/show-custom-stamp-item)

‎Document-Processing/PDF/PDF-Viewer/angular/how-to/create-a-standalone-pdf-viewer-in-angular-12.md‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
---
2+
layout: post
3+
title: Getting started PDF Viewer in Angular 12 | Syncfusion
4+
description: Checkout and learn about Getting started with Standalone PDF Viewer component of Syncfusion Essential JS 2 in Angular 12 and more details.
5+
platform: document-processing
6+
control: PDF Viewer
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Getting started with Angular Standalone PDF Viewer component
12+
13+
This section explains the steps required to create a simple Standalone Angular PDF Viewer and demonstrates the basic usage of the PDF Viewer control in an Angular CLI application.
14+
15+
N> For Angular 17+, see the following links:
16+
17+
* [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).
18+
* [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).
19+
20+
## Setup Angular Environment
21+
22+
You can use the [`Angular CLI`](https://github.com/angular/angular-cli) to setup your Angular applications.
23+
To install the latest Angular CLI globally use the following command.
24+
25+
```bash
26+
npm install -g @angular/cli
27+
```
28+
29+
N> Use the command **npm install --save @angular/cli@12.0.2** to install the Angular CLI version 12.0.2
30+
31+
## Create an Angular Application
32+
33+
Start a new Angular application using the Angular CLI command as follows.
34+
35+
```bash
36+
ng new my-app
37+
cd my-app
38+
```
39+
40+
## Installing Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer package
41+
42+
All the available Essential<sup style="font-size:70%">&reg;</sup> JS 2 packages are published in `npmjs.com` registry.
43+
44+
* To install PDF Viewer component, use the following command.
45+
46+
```bash
47+
npm install @syncfusion/ej2-angular-pdfviewer --save
48+
```
49+
50+
* Copy the contents of the ej2-pdfviewer-lib folder from ./node_modules/@syncfusion/ej2-pdfviewer/dist to the src/assets directory using the command:
51+
52+
```bash
53+
cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib src/assets/ej2-pdfviewer-lib
54+
```
55+
56+
* Confirm that there is an 'ej2-pdfviewer-lib' directory within your public directory, housing the assets of the PDF Viewer library.
57+
58+
* Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the [Troubleshooting](./troubleshooting/troubleshooting) section.
59+
60+
## Registering PDF Viewer Module
61+
62+
Import PDF Viewer module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-pdfviewer` [src/app/app.module.ts].
63+
64+
```typescript
65+
import { NgModule } from '@angular/core';
66+
import { BrowserModule } from '@angular/platform-browser';
67+
// import the PdfViewer Module for the PDF Viewer component
68+
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
69+
MagnificationService, ThumbnailViewService, ToolbarService,
70+
NavigationService, TextSearchService, TextSelectionService,
71+
PrintService, FormDesignerService, FormFieldsService,
72+
AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
73+
import { AppComponent } from './app.component';
74+
75+
@NgModule({
76+
//declaration of ej2-angular-pdfviewer module into NgModule
77+
imports: [BrowserModule, PdfViewerModule],
78+
declarations: [AppComponent],
79+
bootstrap: [AppComponent],
80+
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
81+
ThumbnailViewService, ToolbarService, NavigationService,
82+
TextSearchService, TextSelectionService, PrintService,
83+
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
84+
})
85+
export class AppModule { }
86+
```
87+
88+
## Adding CSS reference
89+
90+
Add the Angular PDF Viewer component's styles as given below in `src/styles.css` file.
91+
92+
```css
93+
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
94+
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
95+
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
96+
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
97+
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
98+
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
99+
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
100+
@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
101+
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
102+
```
103+
104+
## Add the PDF Viewer component
105+
106+
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.
107+
108+
```typescript
109+
import { Component, OnInit } from '@angular/core';
110+
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
111+
MagnificationService, ThumbnailViewService, ToolbarService,
112+
NavigationService, TextSearchService, TextSelectionService,
113+
PrintService, FormDesignerService, FormFieldsService,
114+
AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
115+
116+
@Component({
117+
selector: 'app-root',
118+
// specifies the template string for the PDF Viewer component
119+
template: `<div class="content-wrapper">
120+
<ejs-pdfviewer id="pdfViewer"
121+
[documentPath]='document'
122+
[resourceUrl]='resource'
123+
style="height:640px;display:block">
124+
</ejs-pdfviewer>
125+
</div>`,
126+
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
127+
ThumbnailViewService, ToolbarService, NavigationService,
128+
TextSearchService, TextSelectionService, PrintService,
129+
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
130+
})
131+
export class AppComponent implements OnInit {
132+
public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
133+
public resource: string = "https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2-pdfviewer-lib";
134+
ngOnInit(): void {
135+
}
136+
}
137+
```
138+
139+
### Load PDF Viewer with local resources
140+
141+
To configure the PDF Viewer to use local files for `documentPath` and `resourceUrl` instead of files hosted on a CDN, follow these steps:
142+
143+
**Step 1:** Ensure that your application includes the `ej2-pdfviewer-lib` folder. This folder must contain the `pdfium.js`, `pdfium.wasm` files, and the PDF file that you intend to display. These should be located in the `assets` directory within your project's `src` folder.
144+
145+
**Step 2:** Assign local file paths to the `documentPath` and `resourceUrl` properties within the PDF Viewer setup. The `documentPath` should refer to your PDF file, while the `resourceUrl` should point to the directory containing the supporting resources.
146+
147+
By following these steps, you will configure your PDF Viewer to load the required resources locally. See the code snippet below for reference.
148+
149+
```typescript
150+
template: `<ejs-pdfviewer id="pdfViewer"
151+
[documentPath]='document'
152+
[resourceUrl]='resource'
153+
style="height:640px;display:block">
154+
</ejs-pdfviewer>`,
155+
export class AppComponent implements OnInit {
156+
public document: string = window.location.origin + "/assets/pdfsuccinctly.pdf";
157+
public resource: string = window.location.origin + "/assets/ej2-pdfviewer-lib";
158+
}
159+
```
160+
161+
View the sample in GitHub to [load PDF Viewer with local resources](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to/Refer%20resource%20url%20locally)
162+
163+
## Run the application
164+
165+
Use the following command to run the application in browser.
166+
167+
```javascript
168+
ng serve --open
169+
```
170+
171+
The output will appear as follows.
172+
173+
{% tabs %}
174+
{% highlight ts tabtitle="app.component.ts" %}
175+
import { Component, OnInit } from '@angular/core';
176+
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
177+
MagnificationService, ThumbnailViewService, ToolbarService,
178+
NavigationService, TextSearchService, TextSelectionService,
179+
PrintService, FormDesignerService, FormFieldsService,
180+
AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
181+
182+
@Component({
183+
selector: 'app-container',
184+
// specifies the template string for the PDF Viewer component
185+
template: `<div class="content-wrapper">
186+
<ejs-pdfviewer
187+
id="pdfViewer"
188+
[documentPath]='document'
189+
[resourceUrl]='resource'
190+
style="height:640px;display:block">
191+
</ejs-pdfviewer>
192+
</div>`,
193+
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
194+
ThumbnailViewService, ToolbarService, NavigationService,
195+
TextSearchService, TextSelectionService, PrintService,
196+
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
197+
})
198+
export class AppComponent implements OnInit {
199+
public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
200+
public resource: string = "https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2-pdfviewer-lib";
201+
ngOnInit(): void {
202+
}
203+
}
204+
{% endhighlight %}
205+
206+
{% highlight ts tabtitle="main.ts" %}
207+
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
208+
209+
import { AppModule } from './app/app.module';
210+
211+
212+
platformBrowserDynamic().bootstrapModule(AppModule)
213+
.catch(err => console.error(err));
214+
215+
{% endhighlight %}
216+
{% endtabs %}
217+
218+
{% previewsample "/document-processing/samples/pdfviewer/angular/getting-started-cs1-standalone" %}
219+
220+
## Module injection
221+
222+
To enable additional features, inject the required modules. The following modules extend the PDF Viewer's functionality:
223+
224+
* `LinkAnnotationService`: Enables hyperlink navigation.
225+
* `BookmarkViewService`: Displays and navigates document bookmarks.
226+
* `MagnificationService`: Provides zoom in/out operations.
227+
* `NavigationService`: Enables page navigation.
228+
* `TextSelectionService`: Enables text selection.
229+
* `ThumbnailViewService`: Displays page thumbnails for navigation.
230+
* `ToolbarService`: Enables the built-in toolbar UI.
231+
* `PrintService`: Enables printing.
232+
* `AnnotationService`: Enables annotation features.
233+
* `TextSearchService`: Enables text search.
234+
* `FormFieldsService`: Enables form field support.
235+
* `FormDesignerService`: Enables designing and editing of form fields.
236+
* `PageOrganizerService`: Enables page organization features.
237+
238+
Inject modules using the `providers` array in the component or module.
239+
240+
> Refer to the [Angular PDF Viewer feature tour](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) for an overview of capabilities. Explore the [Angular PDF Viewer example](https://document.syncfusion.com/demos/pdf-viewer/angular/#/tailwind3/pdfviewer/default) to see core features in action.
241+
242+
[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/Getting%20started%20-%20Standalone).

0 commit comments

Comments
 (0)