Skip to content

Commit 7960099

Browse files
BalajiLoganathanSF4826BalajiLoganathanSF4826
committed
1008844: Updated Getting Started documentation for angular platform
1 parent 836818e commit 7960099

7 files changed

Lines changed: 121 additions & 103 deletions

File tree

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

Lines changed: 51 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,13 @@ domainurl: ##DomainURL##
1010

1111
# Getting started with Angular PDF Viewer (server-backed)
1212

13-
This guide explains how to create the PDF Viewer component and configure its features in Angular using the Essential JS 2 in server-backed mode.
13+
This guide explains how to create the PDF Viewer component and configure its features in Angular 21 using the Essential JS 2 in server-backed mode.
14+
15+
> Note: This guide supports **Angular 21** and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the [Angular version support matrix](https://ej2.syncfusion.com/angular/documentation/system-requirement#angular-version-compatibility). Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.
16+
17+
## Prerequisites
18+
19+
Ensure your development environment meets the [System Requirements for Syncfusion<sup style="font-size:70%">&reg;</sup> Angular UI Components](https://ej2.syncfusion.com/angular/documentation/system-requirement).
1420

1521
## Set up the development environment
1622

@@ -21,16 +27,51 @@ To install the latest Angular CLI globally use the following command.
2127
npm install -g @angular/cli
2228
```
2329

30+
> **Angular 21 Standalone Architecture:** Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the [Standalone Guide](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-standalone).
31+
32+
### Installing a specific version
33+
34+
To install a particular version of Angular CLI, use:
35+
36+
```bash
37+
npm install -g @angular/cli@21.0.0
38+
```
39+
2440
## Create an Angular application
2541

2642
Start a new Angular application using the Angular CLI command as follows.
2743

2844
```bash
2945
ng new my-app
46+
```
47+
48+
* This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
49+
50+
![Initial_setup](images/getting-started-styles.png)
51+
52+
* By default, a CSS-based application is created. Use SCSS if required:
53+
54+
```bash
55+
ng new my-app --style=scss
56+
```
57+
58+
* During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.
59+
60+
![Initial_setup](images/getting-started-ssr.png)
61+
62+
* Select the required AI tool or 'none' if you do not need any AI tool.
63+
64+
![Initial_setup](images/getting-started-ai.png)
65+
66+
* Navigate to your newly created application directory:
67+
68+
```bash
3069
cd my-app
3170
```
3271

33-
## Add Syncfusion JavaScript packages
72+
> Note: In Angular 19 and below, it uses `app.component.ts`, `app.component.html`, `app.component.css` etc. In Angular 20+, the CLI generates a simpler structure with `src/app/app.ts`, `app.html`, and `app.css` (no `.component.` suffixes).
73+
74+
## Installing Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer package
3475

3576
All the available Essential JS 2 packages are published in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. To install PDF Viewer component, use the following command.
3677

@@ -56,33 +97,7 @@ Add the component CSS in the `~/src/styles.css` file, as shown below:
5697

5798
## Add the PDF Viewer component
5899

59-
Import PDF Viewer module into Angular application(app.module.ts) from the package `@syncfusion/ej2-angular-pdfviewer` [src/app/app.module.ts].
60-
61-
```typescript
62-
import { NgModule } from '@angular/core';
63-
import { BrowserModule } from '@angular/platform-browser';
64-
// import the PdfViewer Module for the PDF Viewer component
65-
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
66-
MagnificationService, ThumbnailViewService, ToolbarService,
67-
NavigationService, TextSearchService, TextSelectionService,
68-
PrintService, FormDesignerService, FormFieldsService,
69-
AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
70-
import { AppComponent } from './app.component';
71-
72-
@NgModule({
73-
//declaration of ej2-angular-pdfviewer module into NgModule
74-
imports: [BrowserModule, PdfViewerModule],
75-
declarations: [AppComponent],
76-
bootstrap: [AppComponent],
77-
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
78-
ThumbnailViewService, ToolbarService, NavigationService,
79-
TextSearchService, TextSelectionService, PrintService,
80-
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
81-
})
82-
export class AppModule { }
83-
```
84-
85-
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.
100+
Add the Angular PDF Viewer by using `<ejs-pdfviewer>` selector in `template` section of the `src/app/app.ts` file to render the PDF Viewer component.
86101

87102
```typescript
88103
import { Component, OnInit } from '@angular/core';
@@ -102,12 +117,13 @@ import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
102117
style="height:640px;display:block">
103118
</ejs-pdfviewer>
104119
</div>`,
120+
imports: [ PdfViewerModule ],
105121
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
106122
ThumbnailViewService, ToolbarService, NavigationService,
107123
TextSearchService, TextSelectionService, PrintService,
108124
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
109125
})
110-
export class AppComponent implements OnInit {
126+
export class App implements OnInit {
111127
public service = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
112128
public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
113129
ngOnInit(): void {
@@ -127,28 +143,15 @@ ng serve --open
127143
The output will appear as follows.
128144

129145
{% tabs %}
130-
{% highlight ts tabtitle="app.component.ts" %}
131-
{% include code-snippet/pdfviewer/angular/getting-started-cs1/src/app.component.ts %}
146+
{% highlight ts tabtitle="app.ts" %}
147+
{% include code-snippet/pdfviewer/angular/getting-started-cs1/src/app.ts %}
132148
{% endhighlight %}
133149

134150
{% highlight ts tabtitle="main.ts" %}
135151
{% include code-snippet/pdfviewer/angular/getting-started-cs1/src/main.ts %}
136152
{% endhighlight %}
137153
{% endtabs %}
138154

139-
N> If you are using an Angular version below 17, you need import the **AppModule** in the **main.ts** file
140-
141-
```typescript
142-
143-
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
144-
145-
import { AppModule } from './app/app.module';
146-
147-
148-
platformBrowserDynamic().bootstrapModule(AppModule)
149-
.catch(err => console.error(err));
150-
151-
```
152155

153156
{% previewsample "/document-processing/samples/pdfviewer/angular/getting-started-cs1" %}
154157

@@ -199,11 +202,11 @@ Inject modules using the `providers` property in `@NgModule`.
199202
dotnet run
200203
```
201204

202-
6. The PDF Viewer server instance runs at `https://localhost:5001`. Navigate to `https://localhost:5001/pdfviewer` to see the default GET response. Bind this URL to the `serviceUrl` property of the PDF Viewer as shown below.
205+
6. The PDF Viewer server instance runs at `https://localhost:7255`. Navigate to `https://localhost:7255/pdfviewer` to see the default GET response. Bind this URL to the `serviceUrl` property of the PDF Viewer as shown below.
203206

204207
```javascript
205-
export class AppComponent implements OnInit {
206-
public service = 'https://localhost:5001/pdfviewer';
208+
export class App implements OnInit {
209+
public service = 'https://localhost:7255/pdfviewer';
207210
public document = 'PDF_Succinctly.pdf';
208211
ngOnInit(): void {
209212
}

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

Lines changed: 62 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,19 @@ domainurl: ##DomainURL##
1010

1111
# Getting started with Angular Standalone PDF Viewer component
1212

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.
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 21.
1414

15-
N> For Angular 17+, see the following links:
15+
> Note: This guide supports **Angular 21** and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the [Angular version support matrix](https://ej2.syncfusion.com/angular/documentation/system-requirement#angular-version-compatibility). Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.
16+
17+
N> For older versions of Angular, see the following links:
1618

1719
* [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).
1820
* [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).
1921

22+
## Prerequisites
23+
24+
Ensure your development environment meets the [System Requirements for Syncfusion<sup style="font-size:70%">&reg;</sup> Angular UI Components](https://ej2.syncfusion.com/angular/documentation/system-requirement).
25+
2026
## Setup Angular Environment
2127

2228
You can use the [`Angular CLI`](https://github.com/angular/angular-cli) to setup your Angular applications.
@@ -26,17 +32,50 @@ To install the latest Angular CLI globally use the following command.
2632
npm install -g @angular/cli
2733
```
2834

29-
N> Use the command **npm install --save @angular/cli@12.0.2** to install the Angular CLI version 12.0.2
35+
> **Angular 21 Standalone Architecture:** Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the [Standalone Guide](https://ej2.syncfusion.com/angular/documentation/getting-started/angular-standalone).
36+
37+
### Installing a specific version
38+
39+
To install a particular version of Angular CLI, use:
40+
41+
```bash
42+
npm install -g @angular/cli@21.0.0
43+
```
3044

3145
## Create an Angular Application
3246

3347
Start a new Angular application using the Angular CLI command as follows.
3448

3549
```bash
3650
ng new my-app
51+
```
52+
53+
* This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.
54+
55+
![Initial_setup](images/getting-started-styles.png)
56+
57+
* By default, a CSS-based application is created. Use SCSS if required:
58+
59+
```bash
60+
ng new my-app --style=scss
61+
```
62+
63+
* During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.
64+
65+
![Initial_setup](images/getting-started-ssr.png)
66+
67+
* Select the required AI tool or 'none' if you do not need any AI tool.
68+
69+
![Initial_setup](images/getting-started-ai.png)
70+
71+
* Navigate to your newly created application directory:
72+
73+
```bash
3774
cd my-app
3875
```
3976

77+
> Note: In Angular 19 and below, it uses `app.component.ts`, `app.component.html`, `app.component.css` etc. In Angular 20+, the CLI generates a simpler structure with `src/app/app.ts`, `app.html`, and `app.css` (no `.component.` suffixes).
78+
4079
## Installing Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer package
4180

4281
All the available Essential<sup style="font-size:70%">&reg;</sup> JS 2 packages are published in `npmjs.com` registry.
@@ -53,38 +92,10 @@ npm install @syncfusion/ej2-angular-pdfviewer --save
5392
cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib src/assets/ej2-pdfviewer-lib
5493
```
5594

56-
* Confirm that there is an 'ej2-pdfviewer-lib' directory within your public directory, housing the assets of the PDF Viewer library.
95+
* Confirm that there is an 'ej2-pdfviewer-lib' directory within your `src/assets` directory, housing the assets of the PDF Viewer library.
5796

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

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-
8899
## Adding CSS reference
89100

90101
Add the Angular PDF Viewer component's styles as given below in `src/styles.css` file.
@@ -103,7 +114,7 @@ Add the Angular PDF Viewer component's styles as given below in `src/styles.css`
103114

104115
## Add the PDF Viewer component
105116

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.
117+
Add the Angular PDF Viewer by using `<ejs-pdfviewer>` selector in `template` section of the `src/app/app.ts` file to render the PDF Viewer component.
107118

108119
```typescript
109120
import { Component, OnInit } from '@angular/core';
@@ -123,12 +134,13 @@ import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
123134
style="height:640px;display:block">
124135
</ejs-pdfviewer>
125136
</div>`,
137+
imports: [ PdfViewerModule ],
126138
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
127139
ThumbnailViewService, ToolbarService, NavigationService,
128140
TextSearchService, TextSelectionService, PrintService,
129141
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
130142
})
131-
export class AppComponent implements OnInit {
143+
export class App implements OnInit {
132144
public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
133145
public resource: string = "https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2-pdfviewer-lib";
134146
ngOnInit(): void {
@@ -142,7 +154,14 @@ To configure the PDF Viewer to use local files for `documentPath` and `resourceU
142154

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

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.
157+
**Step 2:** Register the assets folder inside `angular.json`
158+
```json
159+
"assets": [
160+
"src/assets"
161+
]
162+
```
163+
164+
**Step 3:** 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.
146165

147166
By following these steps, you will configure your PDF Viewer to load the required resources locally. See the code snippet below for reference.
148167

@@ -180,7 +199,7 @@ import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
180199
AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';
181200

182201
@Component({
183-
selector: 'app-container',
202+
selector: 'app-root',
184203
// specifies the template string for the PDF Viewer component
185204
template: `<div class="content-wrapper">
186205
<ejs-pdfviewer
@@ -190,12 +209,13 @@ import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
190209
style="height:640px;display:block">
191210
</ejs-pdfviewer>
192211
</div>`,
212+
imports: [ PdfViewerModule ],
193213
providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
194214
ThumbnailViewService, ToolbarService, NavigationService,
195215
TextSearchService, TextSelectionService, PrintService,
196216
AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
197217
})
198-
export class AppComponent implements OnInit {
218+
export class App implements OnInit {
199219
public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
200220
public resource: string = "https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2-pdfviewer-lib";
201221
ngOnInit(): void {
@@ -204,13 +224,12 @@ export class AppComponent implements OnInit {
204224
{% endhighlight %}
205225

206226
{% highlight ts tabtitle="main.ts" %}
207-
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
208-
209-
import { AppModule } from './app/app.module';
210-
227+
import { bootstrapApplication } from '@angular/platform-browser';
228+
import { appConfig } from './app/app.config';
229+
import { App } from './app/app';
211230

212-
platformBrowserDynamic().bootstrapModule(AppModule)
213-
.catch(err => console.error(err));
231+
bootstrapApplication(App, appConfig)
232+
.catch((err) => console.error(err));
214233

215234
{% endhighlight %}
216235
{% endtabs %}

‎Document-Processing/PDF/PDF-Viewer/angular/images/getting-started-ai.png‎

26.8 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/angular/images/getting-started-ssr.png‎

7.07 KB
Loading

‎Document-Processing/PDF/PDF-Viewer/angular/images/getting-started-styles.png‎

17.9 KB
Loading

Document-Processing/code-snippet/pdfviewer/angular/getting-started-cs1/src/app.component.ts renamed to Document-Processing/code-snippet/pdfviewer/angular/getting-started-cs1/src/app.ts

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,11 @@
1-
import { BrowserModule } from '@angular/platform-browser'
2-
import { NgModule } from '@angular/core'
31
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
42
ToolbarService, NavigationService,AnnotationService, TextSearchService, TextSelectionService, PrintService,FormDesignerService, FormFieldsService, PageOrganizerService} from '@syncfusion/ej2-angular-pdfviewer'
5-
6-
73
import { Component, OnInit } from '@angular/core';
84

95
@Component({
10-
imports: [ PdfViewerModule ],
11-
standalone: true,
12-
selector: 'app-container',
6+
imports: [ PdfViewerModule ],
7+
standalone: true,
8+
selector: 'app-root',
139
// specifies the template string for the PDF Viewer component
1410
template: `<div class="content-wrapper">
1511
<ejs-pdfviewer
@@ -22,8 +18,8 @@ standalone: true,
2218
providers: [LinkAnnotationService, BookmarkViewService, MagnificationService,ThumbnailViewService, ToolbarService
2319
, NavigationService, AnnotationService, TextSearchService, TextSelectionService, PrintService, FormDesignerService, FormFieldsService, PageOrganizerService]
2420
})
25-
export class AppComponent implements OnInit {
26-
public service = 'https://services.syncfusion.com/angular/production/api/pdfviewer';
21+
export class App implements OnInit {
22+
public service = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
2723
public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
2824
ngOnInit(): void {
2925
}

0 commit comments

Comments
 (0)